/**
 * Vivo Counter 2.0 — four custom properties, and that is the whole surface.
 *
 * The previous version had icons, images and four arrangements, which meant
 * three more groups of properties for things Elementor already styles better.
 * What is left is the number and the text under it.
 */

.vivo_ctr {
  --vivo-ct-number-size: 60px;
  --vivo-ct-number-color: currentColor;
  --vivo-ct-text-size: 20px;
  --vivo-ct-text-color: currentColor;

  /*
   * Block, not inline-block, and no text-align of its own: that is what lets
   * the builder's alignment reach the number. An inline-block shrinks to its
   * content and then sits wherever the parent puts it — which looked right
   * until someone centred it in Elementor and only the caption moved.
   */
  display: block;
}

.vivo_ctr_line {
  font-size: var(--vivo-ct-number-size);
  color: var(--vivo-ct-number-color);
  line-height: 1.1;

  /* The digits keep their column while they count: without it, every 1 in a
   * proportional font is narrower than every 8 and the number jitters. */
  font-variant-numeric: tabular-nums;
}

/*
 * Prefix and number share a reserved width, and the reservation is an
 * invisible twin of themselves — the browser measures it in the real font, at
 * the real size, with the real letter spacing. Anything we could calculate
 * would be a guess about a font we have not seen.
 */
.vivo_ctr_num {
  display: inline-grid;
}

.vivo_ctr_num > .vivo_ctr_block {
  grid-area: 1 / 1;

  /* Both twins occupy the same cell, so the wider one sets the width. The
   * visible number grows leftwards from a fixed right edge, which is what
   * keeps the postfix behind it still. */
  justify-self: end;
  white-space: nowrap;
}

.vivo_ctr_ghost {
  visibility: hidden;
}

.vivo_ctr_txt {
  font-size: var(--vivo-ct-text-size);
  color: var(--vivo-ct-text-color);
}

/*
 * Prefix and postfix sit flush against the number, as they do in Elementor:
 * "$" "1.250" "+" is one token and must not be spaced apart. A word behind
 * the number needs a space, and the space the editor types is the one that
 * decides — which is why it survives here instead of being collapsed away.
 */
.vivo_ctr_prefix,
.vivo_ctr_postfix {
  white-space: pre-wrap;
}