/**
 * Elements4Elementor - Stat Card Widget Styles
 * Uses B&M Mechanical Design System CSS Variables
 */

.bm-stat-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: var(--radius-card); /* Default from design system */
}

.bm-stat-card:hover {
    transform: translateY(-2px);
}

.bm-stat-card__icon-container {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: var(--radius); /* Default from design system */
}

.bm-stat-card__icon-container i,
.bm-stat-card__icon-container svg {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.bm-stat-card:hover .bm-stat-card__icon-container {
    transform: scale(1.05);
}

/* Cog animation */
.bm-stat-card__cog.animate svg {
    animation: rotateCog var(--animation-duration-1, 104s) linear infinite;
}

.bm-stat-card__cog--bottom-right.animate svg {
    animation: rotateCog var(--animation-duration-2, 136s) linear infinite reverse;
}

@keyframes rotateCog {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Ensure proper typography using design system variables */
.bm-stat-card p {
    font-family: var(--font-family-paragraph);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

.bm-stat-card p.small {
    font-family: var(--font-family-inter);
    font-size: var(--text-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-small);
}

.bm-stat-card h2 {
    font-family: var(--font-family-headline);
    font-size: var(--text-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
}

/* Typography classes with design system defaults */
.bm-stat-card__title {
    color: var(--muted-foreground);
    font-family: var(--font-family-inter);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

.bm-stat-card__number {
    color: var(--foreground);
    font-family: var(--font-family-headline);
    font-size: var(--text-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
}

.bm-stat-card__subtitle {
    color: var(--muted-foreground);
    font-family: var(--font-family-inter);
    font-size: var(--text-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-small);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bm-stat-card h2 {
        font-size: var(--text-h3);
        line-height: var(--line-height-h3);
        letter-spacing: var(--letter-spacing-h3);
    }
    
    .bm-stat-card__number {
        font-size: var(--text-h3);
        line-height: var(--line-height-h3);
        letter-spacing: var(--letter-spacing-h3);
    }
}