/* land-kpi-stats – full-bleed banner without overflow + half-overlap KPI bar */
.ms-kpi-stats{
  --container: min(1200px, 92vw);
  --brand:#ec4899; --brand2:#f472b6; --accent:#8b5cf6;
  --ink:#171717; --muted:#616161;
  --radius:20px;
  --h:460px;              /* ارتفاع بنر */
  --bar-pad:14px;
  --bar-gap:12px;
  --bar-overlay:.5;       /* چند درصد روی عکس باشد */
  --bg-pos:center;        /* جای تمرکز تصویر (از render.php هم می‌آید) */

  font-family:"IRANSans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  position:relative;
  isolation:isolate;

  /* تنها همین ماژول، overflow افقی را می‌بندد تا اسکرول نسازد */
  overflow-x: clip;
}

/* بنر تصویر – عرض 100% (نه 100vw) تا اسکرول افقی ایجاد نشود */
.ms-kpi-stats__banner{
  position:relative;
  height:var(--h);
  z-index:1;
  overflow:hidden;           /* لبه‌های تصویر را داخل خودش نگه می‌دارد */
}
.ms-kpi-stats__banner::before{
  content:"";
  position:absolute; inset:0;
  width:100%;               /* ✅ بدون اورفلو */
  height:100%;
  background-image: var(--bg-img, linear-gradient(135deg,#fdf2f8,#e9d5ff));
  background-position: var(--bg-pos, center);  /* ✅ کنترل تمرکز تصویر */
  background-size: cover;
  background-repeat: no-repeat;
}
.ms-kpi-stats__banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.00) 45%, rgba(255,255,255,.14));
  pointer-events:none;
}

/* ظرف نوار KPI */
.ms-kpi-stats__wrap{
  width:var(--container);
  margin-inline:auto;
  position:relative;
  z-index:2;
  transform: translateY(calc(-1 * var(--h) * var(--bar-overlay)));
}

/* نوار KPI */
.ms-kpi-stats__bar{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:var(--bar-gap);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
  border:1px solid rgba(17,24,39,.08);
  border-radius:calc(var(--radius) + 4px);
  padding:var(--bar-pad);
  box-shadow:0 18px 38px rgba(17,24,39,.12), 0 6px 18px rgba(17,24,39,.08);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
}

@media (max-width:1000px){
  .ms-kpi-stats__bar{ grid-template-columns: 1fr 1fr; }
  .ms-kpi-stats__wrap{ transform: translateY(calc(-1 * var(--h) * .42)); }
}
@media (max-width:620px){
  .ms-kpi-stats__bar{ grid-template-columns: 1fr; }
  .ms-kpi-stats__wrap{ transform: translateY(calc(-1 * var(--h) * .36)); }
}

/* آیتم KPI */
.ms-kpi-stats__item{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:16px; border:1px solid rgba(17,24,39,.06);
  background:#fff;
}
.ms-kpi-stats__ico{
  width:48px; height:48px; flex:0 0 48px;
  border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  font-size:18px;
}
.ms-kpi-stats__val{
  font-family:"Lalezar","IRANSans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(22px, 4vw, 34px);
  line-height:1;
  color:var(--brand);
}
.ms-kpi-stats__val span{ color:var(--muted); font-size:14px; font-weight:400; }
.ms-kpi-stats__label{ display:block; color:var(--muted); }

/* دارک‌مود */