/**
 * Classic Monks Number Counter - BEM Naming Convention

/* Block: The main container */
.number-counter {
    display: inline-flex;
    align-items: baseline;
    position: relative;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    word-break: break-all;
    /* Better default styles for Bricks integration */
    font-size: 2rem;
    font-weight: 600;
    color: currentColor;
}

/* Element: The actual number value */
.number-counter__value {
    display: inline-block;
    transition: opacity 0.2s ease;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Elements: Prefix and suffix text */
.number-counter__prefix,
.number-counter__suffix {
    display: inline-block;
    font-variant-numeric: normal;
}

/* Better spacing for prefix/suffix */
.number-counter__prefix {
    margin-right: 0.25em;
}

.number-counter__suffix {
    margin-left: 0.25em;
}

/* Modifier: Animation states */
.number-counter--animating .number-counter__value {
    opacity: 1;
}

.number-counter--completed .number-counter__value {
    opacity: 1;
}

/* Bricks Builder integration */
.bricks-frontend .number-counter {
    min-height: 1em;
}

/* Reset default styles when custom typography is applied */
.number-counter.has-custom-font-size,
.number-counter.has-custom-color,
.number-counter[style*="font-size"],
.number-counter[style*="color"],
.number-counter[style*="font-weight"],
.number-counter[style*="font-family"] {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .number-counter {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .number-counter {
        font-size: 1.25rem;
    }
}

/* Accessibility - Respect user preferences */
@media (prefers-reduced-motion: reduce) {
    .number-counter *,
    .number-counter::before,
    .number-counter::after {
        transition: none !important;
        animation: none !important;
    }
    
    /* Still allow the number to change, just without transitions */
    .number-counter__value {
        transition: none !important;
    }
}

/* Accessibility improvements */
.number-counter {
    /* Ensure proper focus styles for accessibility */
    outline: none;
}

.number-counter:focus,
.number-counter:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .number-counter {
        border: 1px solid currentColor;
        padding: 0.25em 0.5em;
        border-radius: 4px;
        background: transparent;
    }
}

/* Dark mode considerations */
@media (prefers-color-scheme: dark) {
    .number-counter {
        color: inherit;
    }
}

/* Print styles */
@media print {
    .number-counter {
        color: black !important;
        background: transparent !important;
        font-size: inherit !important;
    }
    
    .number-counter__prefix,
    .number-counter__suffix,
    .number-counter__value {
        color: black !important;
    }
}

/* RTL support */
[dir="rtl"] .number-counter__prefix {
    margin-right: 0;
    margin-left: 0.25em;
}

[dir="rtl"] .number-counter__suffix {
    margin-left: 0;
    margin-right: 0.25em;
}

/* Loading state - subtle animation while waiting for intersection */
.number-counter:not(.number-counter--animating):not(.number-counter--completed) .number-counter__value {
    opacity: 0.7;
}

/* Ensure proper stacking context */
.number-counter {
    position: relative;
    z-index: 1;
}

/* Performance optimization - use transform for better animation */
.number-counter__value {
    will-change: auto;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}