/* ============================================
   CLS PREVENTION ADDITIONS
   Apply these to css/trust-enhancements.css
   ============================================ */

/* Add to end of file or merge with existing rules */

/* CLS PREVENTION FOR ALL ANIMATED COUNTERS */
.metric-value {
    min-width: 5rem;
    min-height: 3.5rem;
    font-variant-numeric: tabular-nums;
}

.timeline-number {
    min-width: 5rem;
    min-height: 3.5rem;
    font-variant-numeric: tabular-nums;
}

.roi-percentage {
    min-width: 5rem;
    min-height: 3.5rem;
    font-variant-numeric: tabular-nums;
}

.community-number {
    min-width: 8rem;
    min-height: 5rem;
    font-variant-numeric: tabular-nums;
}

/* CLS PREVENTION FOR ICON CONTAINERS */
.metric-icon,
.security-icon,
.guarantee-icon,
.solution-icon {
    min-width: 80px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon i,
.security-icon i,
.guarantee-icon i,
.solution-icon i {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

/* FONT AWESOME ICON SPACE RESERVATION */
.fas, .fab, .far, .fa {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    vertical-align: middle;
}

/* SPECIFIC ICON SIZES */
.hero-badge i {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

.nav-trust-item i {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.timeline-circle {
    min-width: 140px;
    min-height: 140px;
}

/* ANIMATED STAT CONTAINERS */
.dashboard-metric,
.timeline-card,
.roi-metric,
.community-stat-large {
    min-height: 200px; /* Prevents layout shift during animation */
}

/* PREVENT BUTTON SHIFTS */
.btn {
    min-height: 44px; /* Minimum touch target size */
}

.btn-large {
    min-height: 52px;
}