/* Material Icons Fallback CSS */
/* This file provides fallback styling for Material Icons when Google Fonts fail to load */

/* Fallback font stack for Material Icons */
.material-icons,
.material-icons-outlined,
.material-symbols-outlined {
    font-family: 'Material Icons', 'Material Icons Outlined', 'Material Symbols Outlined',
                 'Material Design Icons', 'MDI',
                 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome',
                 'Apple Symbols', 'Segoe UI Symbol', 'Segoe UI Emoji',
                 'Noto Color Emoji', 'Android Emoji', 'EmojiSymbols',
                 monospace, sans-serif;
    font-display: swap; /* Improve loading performance */
}

/* Ensure consistent sizing */
.material-icons,
.material-icons-outlined,
.material-symbols-outlined {
    vertical-align: middle;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Loading state - show placeholder while fonts load */
.material-icons:empty::before,
.material-icons-outlined:empty::before,
.material-symbols-outlined:empty::before {
    content: '●';
    opacity: 0.3;
    animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.3; }
    to { opacity: 0.7; }
}

/* Specific fallbacks for common icons */
.material-icons-outlined[class*="person"]::before,
.material-symbols-outlined[class*="person"]::before {
    content: '👤';
}

.material-icons-outlined[class*="email"]::before,
.material-symbols-outlined[class*="email"]::before {
    content: '📧';
}

.material-icons-outlined[class*="phone"]::before,
.material-symbols-outlined[class*="phone"]::before {
    content: '📞';
}

.material-icons-outlined[class*="location"]::before,
.material-symbols-outlined[class*="location"]::before {
    content: '📍';
}

.material-icons-outlined[class*="payment"]::before,
.material-symbols-outlined[class*="payment"]::before {
    content: '💳';
}

.material-icons-outlined[class*="security"]::before,
.material-symbols-outlined[class*="security"]::before {
    content: '🔒';
}

.material-icons-outlined[class*="warning"]::before,
.material-symbols-outlined[class*="warning"]::before {
    content: '⚠️';
}

.material-icons-outlined[class*="info"]::before,
.material-symbols-outlined[class*="info"]::before {
    content: 'ℹ️';
}

.material-icons-outlined[class*="check"]::before,
.material-symbols-outlined[class*="check"]::before {
    content: '✓';
}

.material-icons-outlined[class*="close"]::before,
.material-symbols-outlined[class*="close"]::before {
    content: '✕';
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .material-icons,
    .material-icons-outlined,
    .material-symbols-outlined {
        font-weight: bold;
        text-shadow: 0 0 1px currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .material-icons:empty::before,
    .material-icons-outlined:empty::before,
    .material-symbols-outlined:empty::before {
        animation: none;
    }
}

/* Print styles */
@media print {
    .material-icons,
    .material-icons-outlined,
    .material-symbols-outlined {
        color: black !important;
        font-size: 14px !important;
    }
}