/* =============================================================================
 * Vitalum Icon Panel Widget
 * 1-for-1 port of card.html's .card-icon-panel (soft glow + two rings + tinted
 * icon + big number + subtitle). Every selector is scoped under .vip-panel so
 * nothing in the widget can leak out, and nothing from the theme can leak in.
 * ============================================================================= */

.vip-panel,
.vip-panel *,
.vip-panel *::before,
.vip-panel *::after { box-sizing: border-box; }

.vip-panel {
  /* Tunable via Elementor Style tab (see widget PHP). */
  --vip-accent:      #1ebf95;
  --vip-accent-rgb:  30,191,149;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 3rem 2rem;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* Soft radial haze behind everything */
.vip-glow {
  position: absolute;
  width: 360px; height: 360px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
                rgba(var(--vip-accent-rgb), 0.13) 0%,
                transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Inner ring */
.vip-ring {
  position: absolute;
  width: 240px; height: 240px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--vip-accent-rgb), 0.15);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Outer ring */
.vip-ring2 {
  position: absolute;
  width: 310px; height: 310px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--vip-accent-rgb), 0.07);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Icon — rendered as a coloured mask of whatever image the user picks.
   This lets ANY SVG/PNG be tinted to the accent colour cleanly, instead of
   relying on the fragile invert/sepia/hue-rotate hack from the original CSS. */
.vip-icon {
  display: inline-block;
  width: 110px;
  height: 110px;
  margin-bottom: 1.5rem;
  background-color: var(--vip-accent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  filter: drop-shadow(0 0 22px rgba(var(--vip-accent-rgb), 0.5));
  position: relative;
  z-index: 1;
}

.vip-text {
  position: relative;
  z-index: 1;
  text-align: center;
}

.vip-num {
  display: block;
  font-size: 3.2rem;
  font-weight: 200;
  color: var(--vip-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.vip-sub {
  display: block;
  font-size: 0.8rem;
  color: #7aada3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.35rem;
}

/* -------- Responsive (matches original at 991.98px cutoff) -------- */
@media (max-width: 991.98px) {
  .vip-panel { min-height: 260px; }
}