/* Target just this widget: new class first, keep Elementor ID as fallback */
.f12-nations-counter .elementor-heading-title,
.elementor-element-a5feb46 .elementor-heading-title{
  display:inline-flex;          /* lay digits left→right */
  gap:0;                        /* avoid odd spacing between digit cells */
  line-height:1;                /* 1em == one digit slice */
  font-variant-numeric: tabular-nums;
  font-feature-settings:'tnum' 1; /* enforce tabular numbers where supported */
  position:relative;
  white-space: nowrap;          /* never break digits across lines */
  z-index: 1;                   /* ensure badge never overlays digits */
}

/* stop spans from stacking vertically */
.f12-nations-counter .elementor-heading-title .digit,
.elementor-element-a5feb46 .elementor-heading-title .digit{
  display:inline-block;
  width:1.1ch;      /* extra safety for fonts without true tabular nums */
  height:1em;
  line-height:1;
  overflow:hidden;
}
/* gently tuck adjacent digits closer for nicer optical spacing */
.f12-nations-counter .elementor-heading-title .digit + .digit,
.elementor-element-a5feb46 .elementor-heading-title .digit + .digit{
  margin-left: var(--digit-tuck, -0.08ch);
}

/* digit stack + animation stays the same */
.f12-nations-counter .elementor-heading-title .stack,
.elementor-element-a5feb46 .elementor-heading-title .stack{ display:block; transform: translateY(0); }
.f12-nations-counter .elementor-heading-title .stack > span, /* each numeral row */
.elementor-element-a5feb46 .elementor-heading-title .stack > span{ /* each numeral row */
  display:block;
  line-height:1em;          /* row height = 1 digit cell */
}
.f12-nations-counter.is-play .elementor-heading-title .stack.from,
.elementor-element-a5feb46.play .elementor-heading-title .stack.from{
  transition: transform .9s cubic-bezier(.2,.7,.2,1); /* timing handled in JS */
  transform: translateY(-1em); /* move exactly one row */
}

/* NEW pill badge — brand-friendly lozenge with pop-in, then auto-fade via .badge-hide */
.f12-nations-counter,
.elementor-element-a5feb46.nations-flip{
  --brand-red: #BA2516;                   /* Four12 brand red */
  --badge-bg: var(--brand-red);           /* badge color follows brand */
  --badge-border: rgba(0,0,0,.08);
  --badge-shadow: 0 6px 16px rgba(239,68,68,.25);
}
.f12-nations-counter::after,
.elementor-element-a5feb46.nations-flip::after{
  content:"NEW";
  position:absolute; top:-0.8em; right:calc(-1.0em - 1.0ch); /* nudge slightly up */
  font-size:.55em; font-weight:700; letter-spacing:.02em;
  padding:.28em .55em; border-radius:999px;
  background:var(--badge-bg); color:#fff; border:1px solid var(--badge-border);
  box-shadow:var(--badge-shadow);
  opacity:0; transform:translateY(-4px) scale(.85);
  transition:opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
.f12-nations-counter.is-play::after,
.elementor-element-a5feb46.nations-flip.play::after{ opacity:1; transform:translateY(0) scale(1); }
.f12-nations-counter.is-badge-hidden::after,
.elementor-element-a5feb46.nations-flip.badge-hide::after{ opacity:0; transform:translateY(-4px) scale(.92); }
/* allow disabling the badge entirely via class */
.f12-nations-counter.no-badge::after{ display:none; }

/* playful pre‑attention: a gentle wiggle */
@keyframes nations-wiggle{ /* small, quick, non-annoying */
  0%{ transform: translateY(0) rotate(0); }
  15%{ transform: translateY(-2px) rotate(-0.6deg); }
  30%{ transform: translateY(2px) rotate(0.6deg); }
  45%{ transform: translateY(-1px) rotate(-0.4deg); }
  60%{ transform: translateY(1px) rotate(0.4deg); }
  75%{ transform: translateY(0) rotate(0); }
  100%{ transform: translateY(0) rotate(0); }
}
.f12-nations-counter.is-tease .elementor-heading-title .digit,
.elementor-element-a5feb46.tease .elementor-heading-title .digit{
  animation: nations-wiggle .5s ease-in-out 2; /* two quick shakes */
  transform-origin: 50% 70%;
}

@media (prefers-reduced-motion: reduce){
  .f12-nations-counter .elementor-heading-title .stack.from,
  .elementor-element-a5feb46 .elementor-heading-title .stack.from{ transition:none; transform:translateY(-1em); }
  .f12-nations-counter::after,
  .elementor-element-a5feb46.nations-flip::after{ display:none; }
  .f12-nations-counter.is-tease .elementor-heading-title .digit,
  .elementor-element-a5feb46.tease .elementor-heading-title .digit{ animation:none; }
}

/* Outline animation for the stat card (closest container). This draws a subtle brand-red border around the card. */
@property --outline-progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}
.f12-stat.is-outline-anim{ position:relative; }
.f12-stat.is-outline-anim::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background: conic-gradient(var(--brand-red, #BA2516) calc(var(--outline-progress)*1turn), transparent 0) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0; pointer-events:none;
}
.f12-stat.is-outline-anim.is-running::before{
  opacity:1;
  animation: f12-outline-draw 1.1s ease-out forwards;
}
@keyframes f12-outline-draw{ to { --outline-progress: 1; } }
.f12-stat.is-outline-anim.outline-solid{ /* cover any conic seam with a solid inset border */
  box-shadow: inset 0 0 0 2px var(--brand-red, #BA2516);
}
.f12-stat.is-outline-anim.settle::before{
  transition: opacity .6s ease .8s;
  opacity:0;
}