/* ==========================================
   Unified Emoji Support
   Handles emoji rendering across all platforms
   (Windows 10/11, macOS, Linux)
   ========================================== */

:root {
    /* Emoji font stack - Windows fonts first, then cross-platform fallbacks */
    --font-emoji: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    
    /* System font stack with emoji support */
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* Combined font stack for use throughout the app */
    --font-stack: var(--font-system), var(--font-emoji);
}

/* Base font family */
html, body {
    font-family: var(--font-stack);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Inherit font throughout */
* {
    font-family: inherit;
}

/* Form elements need explicit font-family for emoji support */
button, input, select, textarea, [role="button"], .btn {
    font-family: var(--font-stack);
    line-height: 1.5;
}

/* Common elements that display emojis */
.btn-icon,
.status-badge,
.badge,
.payment-icon,
.modifier-indicator,
.empty-icon,
.receipt-logo,
.refund-warning,
[class*="btn-"] {
    font-family: var(--font-stack);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    line-height: 1.5;
}

/* Specific emoji element support */
.emoji,
[data-emoji] {
    font-family: var(--font-emoji);
    line-height: 1;
    display: inline-block;
}

/* Payment icons - larger emoji display */
.payment-icon {
    font-size: 32px;
    line-height: 1;
}

/* Modal and alert emoji support */
.modal-header,
.modal-body,
.modal-footer,
.alert,
.receipt-header {
    font-family: var(--font-stack);
}

/* Code/monospace with emoji fallback */
code, pre {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace, var(--font-emoji);
}

/* Windows high DPI scaling support */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .emoji, .payment-icon, .btn-icon {
        transform: translateZ(0);
    }
}