/* =========================================================
   HEALTH KPI CARDS (4 Summary Cards with 3D PNG Icons)
   Strictly scoped to #health top 4 summary cards.
   Does not affect #overview, #social, #sims, or global styles.
   ========================================================= */

.health-v2-kpi-card {
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.health-v2-kpi-left {
  position: relative !important;
  z-index: 2 !important;
  max-width: 62% !important;
}

.health-v2-kpi-pill {
  white-space: nowrap !important;
}

/* Neutralize illustration hover effects */
.health-v2-kpi-decor,
.health-v2-kpi-decor:hover,
.health-kpi-illustration,
.health-kpi-illustration:hover {
  transform: none !important;
  animation: none !important;
}

/* Right Illustration Container */
.health-v2-kpi-decor {
  position: absolute !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 1 !important;
}

/* Ambient glow matching reference colors */
.health-v2-kpi-decor-glow {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(18px) !important;
  opacity: 0.65 !important;
  z-index: 0 !important;
  right: 6px !important;
  bottom: 6px !important;
  pointer-events: none !important;
}

/* 3D Illustration images */
.health-kpi-illustration {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.04)) !important;
}

/* Base / Standard Desktop (1200px - 1440px) */
.health-v2-kpi-decor-glow {
  width: 68px !important;
  height: 68px !important;
}

.health-v2-kpi-decor--globe {
  right: 14px !important;
  bottom: 7px !important;
}

.health-v2-kpi-decor--speed {
  right: 14px !important;
  bottom: 7px !important;
}

.health-v2-kpi-decor--uptime {
  right: 14px !important;
  bottom: 10px !important;
}

.health-v2-kpi-decor--ssl {
  right: 16px !important;
  bottom: 7px !important;
}

.health-kpi-illustration--globe {
  width: 78px !important;
  height: 73px !important;
}

.health-kpi-illustration--speed {
  width: 86px !important;
  height: 62px !important;
}

.health-kpi-illustration--uptime {
  width: 94px !important;
  height: 50px !important;
}

.health-kpi-illustration--ssl {
  width: 64px !important;
  height: 78px !important;
}

/* Large Desktop screens (e.g. 1920x1080 Full HD) */
@media (min-width: 1500px) {
  .health-v2-kpi-decor-glow {
    width: 78px !important;
    height: 78px !important;
  }

  .health-v2-kpi-decor--globe {
    right: 18px !important;
    bottom: 7px !important;
  }

  .health-v2-kpi-decor--speed {
    right: 18px !important;
    bottom: 7px !important;
  }

  .health-v2-kpi-decor--uptime {
    right: 18px !important;
    bottom: 12px !important;
  }

  .health-v2-kpi-decor--ssl {
    right: 22px !important;
    bottom: 7px !important;
  }

  .health-kpi-illustration--globe {
    width: 86px !important;
    height: 80px !important;
  }

  .health-kpi-illustration--speed {
    width: 98px !important;
    height: 70px !important;
  }

  .health-kpi-illustration--uptime {
    width: 108px !important;
    height: 58px !important;
  }

  .health-kpi-illustration--ssl {
    width: 72px !important;
    height: 82px !important;
  }
}

/* Tablet & Mobile Breakpoints (2 cols / 1 col - cards are wide) */
@media (max-width: 1080px) {
  .health-v2-kpi-decor-glow {
    width: 72px !important;
    height: 72px !important;
  }

  .health-v2-kpi-decor--globe {
    right: 18px !important;
    bottom: 8px !important;
  }

  .health-v2-kpi-decor--speed {
    right: 18px !important;
    bottom: 8px !important;
  }

  .health-v2-kpi-decor--uptime {
    right: 18px !important;
    bottom: 11px !important;
  }

  .health-v2-kpi-decor--ssl {
    right: 20px !important;
    bottom: 8px !important;
  }

  .health-kpi-illustration--globe {
    width: 82px !important;
    height: 77px !important;
  }

  .health-kpi-illustration--speed {
    width: 90px !important;
    height: 65px !important;
  }

  .health-kpi-illustration--uptime {
    width: 98px !important;
    height: 52px !important;
  }

  .health-kpi-illustration--ssl {
    width: 66px !important;
    height: 80px !important;
  }
}