/**
 * TT Counter Widget Styles
 *
 * Styles for the animated number counter widget.
 *
 * @since 1.3.3
 */

.tt-flux-counter {
    text-align: center;
    line-height: 1.2;
}

.tt-flux-counter__number-wrap {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.tt-flux-counter__number {
    display: inline-block;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: #003C71;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

/* Symbol — defaults to inheriting the number's font size & color so it
   visually matches unless overridden via Style controls. */
.tt-flux-counter__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1;
}

.tt-flux-counter__number-wrap .tt-flux-counter__symbol {
    /* Inherit from the same baseline as the number for matching size. */
    font-size: 56px;
    font-weight: 700;
    color: #003C71;
}

.tt-flux-counter__symbol--icon i,
.tt-flux-counter__symbol--icon svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    fill: currentColor;
    vertical-align: middle;
}

/* Initial state before animation triggers (visual hint only). */
.tt-flux-counter__number[data-counted="0"] {
    opacity: 0.85;
}

.tt-flux-counter__number[data-counted="1"] {
    opacity: 1;
}