/**
 * WebP Optimization Styles
 * For Pharmaceutical Lab Calculator
 */

/* Base styles for images */
.button-logo {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.button-logo:hover {
    transform: scale(1.05);
}

/* WebP-specific optimizations */
.webp .button-logo {
    /* Additional optimizations for WebP images */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Background image optimizations */
.webp .card-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Preload optimization */
.webp .dashboard-card {
    will-change: transform;
}

/* Responsive image optimizations */
@media (max-width: 768px) {
    .webp .button-logo {
        max-width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .webp .button-logo {
        max-width: 60px;
        height: 60px;
    }
}

/* Loading states for WebP images */
.button-logo[src$=".webp"] {
    opacity: 0;
    animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fallback for browsers without WebP support */
.no-webp .button-logo {
    /* Ensure PNG images are properly displayed */
    image-rendering: auto;
}