/**
 * FontAwesome Compatibility Styles - Pixel Perfect Design
 * 
 * @package SlotsJuiceBonTypes
 * @version 1.0.0
 */

/* ===== FONTAWESOME COMPATIBILITY FIXES ===== */
.slotsjuicebontypes-widget .bonus-icon i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Pixel perfect icon rendering */
    display: inline-block;
    vertical-align: middle;
}

/* ===== BRAND ICONS ===== */
.slotsjuicebontypes-widget .bonus-icon .fab {
    font-weight: 400 !important;
}

/* ===== ICON SIZING CONSISTENCY ===== */
.slotsjuicebontypes-widget .bonus-icon {
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slotsjuicebontypes-widget .bonus-icon i,
.slotsjuicebontypes-widget .bonus-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* ===== EMOJI FALLBACK STYLING ===== */
.slotsjuicebontypes-widget .bonus-emoji,
.slotsjuicebontypes-widget .icon-fallback {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1.1em;
    line-height: 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== BUTTON ICON FIXES ===== */
.slotsjuicebontypes-widget .bonus-link i,
.slotsjuicebontypes-widget .bonus-link svg {
    margin-left: var(--space-1);
    font-size: 0.9em;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.slotsjuicebontypes-widget .bonus-link:hover i,
.slotsjuicebontypes-widget .bonus-link:hover svg {
    opacity: 1;
    transform: translateX(2px);
}

/* ===== FALLBACK FOR MISSING ICONS ===== */
.slotsjuicebontypes-widget .bonus-icon i:before {
    content: attr(data-fallback) !important;
}

.slotsjuicebontypes-widget .bonus-icon i[data-fallback]:before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: normal;
    font-style: normal;
}

/* ===== ICON LOADING STATE ===== */
.slotsjuicebontypes-widget .bonus-icon.loading {
    opacity: 0.6;
}

.slotsjuicebontypes-widget .bonus-icon.loading:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid var(--juice-orange);
    border-radius: 50%;
    animation: iconSpin 1s linear infinite;
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== PIXEL PERFECT ICON ALIGNMENT ===== */
.slotsjuicebontypes-widget .bonus-icon i,
.slotsjuicebontypes-widget .bonus-icon svg,
.slotsjuicebontypes-widget .bonus-emoji {
    vertical-align: baseline;
    position: relative;
    top: -1px; /* Perfect vertical alignment */
}

/* ===== HIGH DPI DISPLAY OPTIMIZATIONS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .slotsjuicebontypes-widget .bonus-icon i {
        -webkit-font-smoothing: subpixel-antialiased;
        transform: translateZ(0);
    }
}

/* ===== DARK MODE COMPATIBILITY ===== */
@media (prefers-color-scheme: dark) {
    .slotsjuicebontypes-widget .bonus-icon i {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}