/* Mobile Icon Fix CSS - FORCE ICON DISPLAY */
/* This file ensures FontAwesome icons display correctly on all mobile devices */

/* CRITICAL: Force FontAwesome fonts to load */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff') format('woff'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.ttf') format('truetype');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff') format('woff'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.ttf') format('truetype');
}

/* FORCE ALL FontAwesome icons to display with proper font family */
.fas, .fa-solid, 
.far, .fa-regular,
.fab, .fa-brands,
.fal, .fa-light,
.fat, .fa-thin,
.fad, .fa-duotone,
.fass, .fa-sharp,
[class*="fa-"] {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome', sans-serif !important;
    font-weight: 900 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-style: normal !important;
    font-variant: normal !important;
    line-height: 1 !important;
    display: inline-block !important;
    speak: none !important;
}

/* Brand icons specific styling */
.fab, .fa-brands,
.fab[class*="fa-"], .fa-brands[class*="fa-"] {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}

/* MOBILE SPECIFIC FIXES */
@media (max-width: 768px) {
    
    /* Force minimum icon size on mobile */
    .fas, .far, .fab, .fal, .fat, .fad, .fass,
    [class*="fa-"] {
        min-width: 1em !important;
        min-height: 1em !important;
        font-size: inherit !important;
        vertical-align: baseline !important;
    }
    
    /* Mobile navigation icons */
    .mobile-nav-item i,
    .mobile-bottom-nav i,
    .mobile-top-bar i {
        font-size: 1.25rem !important;
        line-height: 1 !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin-right: 0.5rem !important;
    }
    
    /* Mobile bottom navigation specific */
    .mobile-bottom-nav .fas,
    .mobile-bottom-nav .fa-solid {
        font-size: 1.125rem !important;
        margin-bottom: 0.25rem !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* Mobile hamburger menu */
    .mobile-menu-button i,
    #mobile-menu-button i {
        font-size: 1.5rem !important;
        line-height: 1 !important;
        display: inline-block !important;
    }
    
    /* Cart badge icons */
    .mobile-cart-badge ~ i,
    .cart-count + i,
    .relative i.fas {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Social media icons */
    .social-icons i,
    [class*="fab"] {
        font-family: 'Font Awesome 6 Brands' !important;
        font-weight: 400 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        text-align: center !important;
        display: inline-block !important;
    }
    
    /* Contact section icons */
    .contact-item i,
    .text-2xl i,
    .text-3xl i {
        font-size: 2rem !important;
        line-height: 1 !important;
        display: block !important;
        margin: 0 auto 0.5rem auto !important;
        text-align: center !important;
    }
    
    /* Product card icons */
    .product-card i,
    .group i {
        font-size: 1rem !important;
        line-height: 1 !important;
        display: inline-block !important;
        margin-right: 0.25rem !important;
    }
    
    /* Banner navigation icons */
    .banner-navigation i {
        font-size: 1rem !important;
        line-height: 1 !important;
        display: inline-block !important;
    }
}

/* SMALL MOBILE DEVICES (iPhone SE, etc.) */
@media (max-width: 375px) {
    
    .mobile-nav-item i {
        font-size: 1rem !important;
        margin-right: 0.375rem !important;
    }
    
    .mobile-bottom-nav .fas {
        font-size: 1rem !important;
        margin-bottom: 0.125rem !important;
    }
    
    .contact-item i {
        font-size: 1.5rem !important;
        margin-bottom: 0.375rem !important;
    }
}

/* FORCE DISPLAY FOR SPECIFIC ICONS */
.fa-home:before { content: "\f015" !important; }
.fa-box:before { content: "\f466" !important; }
.fa-shopping-cart:before { content: "\f07a" !important; }
.fa-user:before { content: "\f007" !important; }
.fa-bars:before { content: "\f0c9" !important; }
.fa-times:before { content: "\f00d" !important; }
.fa-search:before { content: "\f002" !important; }
.fa-phone:before { content: "\f095" !important; }
.fa-envelope:before { content: "\f0e0" !important; }
.fa-map-marker-alt:before { content: "\f3c5" !important; }
.fa-clock:before { content: "\f017" !important; }
.fa-store:before { content: "\f54e" !important; }
.fa-chevron-left:before { content: "\f053" !important; }
.fa-chevron-right:before { content: "\f054" !important; }
.fa-star:before { content: "\f005" !important; }
.fa-heart:before { content: "\f004" !important; }
.fa-cart-plus:before { content: "\f217" !important; }
.fa-truck:before { content: "\f0d1" !important; }

/* Brand icons */
.fa-facebook-f:before { content: "\f39e" !important; }
.fa-line:before { content: "\f3c0" !important; }
.fa-tiktok:before { content: "\e07b" !important; }
.fa-youtube:before { content: "\f167" !important; }
.fa-facebook-messenger:before { content: "\f39f" !important; }

/* FALLBACK EMOJI SYSTEM FOR MISSING ICONS */
.fa-home:empty:after { content: "🏠"; }
.fa-box:empty:after { content: "📦"; }
.fa-shopping-cart:empty:after { content: "🛒"; }
.fa-user:empty:after { content: "👤"; }
.fa-bars:empty:after { content: "☰"; }
.fa-search:empty:after { content: "🔍"; }
.fa-phone:empty:after { content: "📞"; }
.fa-envelope:empty:after { content: "✉️"; }
.fa-map-marker-alt:empty:after { content: "📍"; }
.fa-clock:empty:after { content: "🕐"; }
.fa-store:empty:after { content: "🏪"; }
.fa-star:empty:after { content: "⭐"; }
.fa-heart:empty:after { content: "💚"; }
.fa-truck:empty:after { content: "🚚"; }

/* WEBKIT SPECIFIC FIXES */
@supports (-webkit-appearance: none) {
    .fas, .far, .fab, .fal, .fat, .fad, .fass,
    [class*="fa-"] {
        -webkit-text-stroke: 0 !important;
        -webkit-font-feature-settings: normal !important;
    }
}

/* HIGH DPI DISPLAY FIXES */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .fas, .far, .fab, .fal, .fat, .fad, .fass,
    [class*="fa-"] {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }
}

/* ACCESSIBILITY IMPROVEMENTS */
@media (prefers-reduced-motion: no-preference) {
    .fas, .far, .fab, .fal, .fat, .fad, .fass,
    [class*="fa-"] {
        transition: all 0.2s ease-in-out !important;
    }
}

/* ICON COLOR THEMING - NO BLACK ICONS */
.fas, .far, .fab, .fal, .fat, .fad, .fass,
[class*="fa-"] {
    color: #22c55e !important; /* Default green color */
}

/* Navigation icons - white for dark backgrounds */
.mobile-nav-item i,
.mobile-bottom-nav i,
.mobile-top-bar i,
.nav-link i,
.desktop-header i,
.top-contact-bar i {
    color: white !important;
}

/* Social media icons - brand colors */
.fab.fa-facebook-f { color: #1877f2 !important; }
.fab.fa-line { color: #00b900 !important; }
.fab.fa-tiktok { color: #000000 !important; }
.fab.fa-youtube { color: #ff0000 !important; }
.fab.fa-facebook-messenger { color: #0084ff !important; }

/* Contact section icons - themed colors */
.contact-item i,
.text-2xl i,
.text-3xl i {
    color: #22c55e !important; /* Green theme */
}

/* Product icons - accent colors */
.product-card i,
.group i,
.fa-star { color: #f59e0b !important; } /* Orange for stars */
.fa-heart { color: #ef4444 !important; } /* Red for hearts */
.fa-cart-plus { color: #22c55e !important; } /* Green for cart */
.fa-truck { color: #3b82f6 !important; } /* Blue for shipping */
.fa-leaf { color: #10b981 !important; } /* Emerald for natural */

/* Banner navigation - white for overlay */
.banner-navigation i,
.banner-nav i {
    color: white !important;
}

/* Search icon - gray */
.fa-search { color: #6b7280 !important; }

/* Menu icons - white for mobile */
.fa-bars, .fa-times { color: white !important; }

/* DARK MODE COMPATIBILITY */
@media (prefers-color-scheme: dark) {
    .fas, .far, .fab, .fal, .fat, .fad, .fass,
    [class*="fa-"] {
        color: #22c55e !important; /* Keep green theme even in dark mode */
    }
    
    /* Ensure white icons on dark backgrounds */
    .mobile-nav-item i,
    .mobile-bottom-nav i,
    .mobile-top-bar i,
    .nav-link i,
    .desktop-header i,
    .top-contact-bar i {
        color: white !important;
    }
}

/* CRITICAL: Force icon loading check */
@supports (display: grid) {
    .icon-test {
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        content: "\f015";
    }
}

/* PREVENT DUPLICATE ICONS */
/* Hide duplicate mobile navigation */
.mobile-bottom-nav + .mobile-bottom-nav,
nav + nav[class*="bottom"],
nav[class*="bottom"] + nav[class*="bottom"] {
    display: none !important;
}

/* Ensure only one mobile navigation is visible */
.mobile-bottom-nav:not(:first-of-type) {
    display: none !important;
}

/* Prevent duplicate cart icons */
.fa-shopping-cart + .fa-shopping-cart {
    display: none !important;
}

/* Prevent duplicate phone icons */
.fa-phone + .fa-phone {
    display: none !important;
}

/* Prevent duplicate location icons */
.fa-map-marker-alt + .fa-map-marker-alt {
    display: none !important;
}

/* Prevent duplicate star icons */
.fa-star + .fa-star + .fa-star + .fa-star + .fa-star + .fa-star + .fa-star + .fa-star + .fa-star + .fa-star + .fa-star {
    display: none !important;
}

/* Ensure proper spacing between icons */
.mobile-nav-item i {
    margin-right: 0.5rem !important;
}

.mobile-nav-item i:last-child {
    margin-right: 0 !important;
}

/* Force single icon display */
.mobile-nav-item i:not(:first-child) {
    display: none !important;
}