/* Emoji Font Support - Load this early to ensure all emojis render correctly */

:root {
    /* Windows 10/11 native emoji fonts come first, then fallbacks for other OSes */
    --emoji-font-stack: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    --system-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    font-family: var(--system-font-stack), var(--emoji-font-stack);
}

* {
    font-family: inherit;
}

/* Specific elements that commonly display emojis */
button, input, select, textarea, [role="button"], .btn, .badge, .label,
h1, h2, h3, h4, h5, h6, p, span, div, a {
    font-family: var(--system-font-stack), var(--emoji-font-stack);
}

/* Make sure text content with emojis renders properly */
code, pre {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace, var(--emoji-font-stack);
}

/* Ensure emojis display at proper size and don't get cut off */
.btn-icon, button, .status-badge, .badge, [class*="btn"], span:has(+ *):first-letter {
    line-height: 1.5;
}

/* Specific emoji element support */
.emoji, [data-emoji], .payment-icon, .receipt-logo, .empty-icon {
    font-family: var(--emoji-font-stack);
    line-height: 1;
    display: inline-block;
    font-size: inherit;
}