/* 
 * MOBILE ICON UNIFIED FIX - แก้ไขปัญหาไอคอน Mobile ครบถ้วน
 * Version: 1.0
 * Date: 2024-01-15
 * 
 * This CSS file provides a comprehensive solution for mobile icon display issues
 * Compatible with FontAwesome 5.15.4 (Primary) and provides fallback support
 */

/* ===== CRITICAL FONT LOADING ===== */
/* Ensure FontAwesome 5.15.4 loads properly on all devices */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff') format('woff'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.ttf') format('truetype');
}

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

/* ===== UNIVERSAL ICON FIX ===== */
/* Apply to ALL FontAwesome icons with highest specificity */
html body .fas,
html body .far,
html body .fab,
html body .fal,
html body .fad,
html body [class*="fa-"],
html body i.fas,
html body i.far,
html body i.fab,
html body i[class*="fa-"],
html body span.fas,
html body span.far,
html body span.fab,
html body span[class*="fa-"] {
    /* Font Properties - Use FontAwesome 5.15.4 */
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    
    /* Display Properties */
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Layout Properties */
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: baseline !important;
    
    /* Reset conflicting properties */
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
    
    /* Font Rendering */
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    speak: none !important;
    
    /* Z-index to ensure visibility */
    position: relative !important;
    z-index: 1 !important;
}

/* Brand Icons Specific - FontAwesome 5 Brands */
html body .fab,
html body i.fab,
html body span.fab,
html body [class*="fa-facebook"],
html body [class*="fa-line"],
html body [class*="fa-whatsapp"],
html body [class*="fa-twitter"],
html body [class*="fa-instagram"] {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}

/* Regular Icons - FontAwesome 5 Regular */
html body .far,
html body i.far,
html body span.far {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 400 !important;
}

/* ===== MOBILE SPECIFIC FIXES ===== */
@media (max-width: 768px) {
    
    /* Mobile Bottom Navigation - Highest Priority */
    nav.fixed.bottom-0 .fas,
    nav.fixed.bottom-0 .far,
    nav.fixed.bottom-0 .fab,
    nav.fixed.bottom-0 i,
    .mobile-nav-item i,
    .mobile-nav-item .fas,
    .mobile-nav-item .far,
    .mobile-nav-item .fab,
    nav[class*="bottom"] i,
    nav[class*="bottom"] .fas {
        /* Critical: Ensure mobile nav icons are visible */
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        font-size: 1.25rem !important; /* 20px - Good balance for mobile */
        line-height: 1 !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #6b7280 !important; /* Gray for regular state */
        text-align: center !important;
        margin-bottom: 0.25rem !important;
        
        /* Ensure no conflicts */
        width: auto !important;
        height: auto !important;
        background: none !important;
        border: none !important;
        text-decoration: none !important;
        
        /* Force rendering */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Mobile Navigation Hover State */
    .mobile-nav-item:hover i,
    .mobile-nav-item:hover .fas,
    nav.fixed.bottom-0 a:hover i {
        color: #ffffff !important; /* Green on hover */
        transform: scale(1.05) !important;
        transition: all 0.2s ease !important;
    }
    
    /* Home Button Special Styling */
    .mobile-nav-home i,
    .mobile-nav-home .fas,
    .home-center-circle i,
    .home-center-circle .fas,
    a[href="index.php"] .fas.fa-home,
    a[href="/"] .fas.fa-home {
        color: white !important;
        font-size: 1.5rem !important; /* 24px - Larger for prominence */
        text-shadow: none !important;
    }
    
    /* Cart and Notification Badges */
    .cart-count,
    .wishlist-count,
    .notification-badge {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ef4444 !important;
        color: white !important;
        border-radius: 50% !important;
        min-width: 1.25rem !important;
        min-height: 1.25rem !important;
        position: absolute !important;
        top: -0.5rem !important;
        right: -0.5rem !important;
        z-index: 10 !important;
    }
    
    /* Mobile Top Bar Icons */
    .mobile-top-bar i,
    .mobile-top-bar .fas,
    #mobile-menu-button i,
    .mobile-menu-button i {
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        font-size: 1.5rem !important; /* 24px */
        color: white !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        line-height: 1 !important;
    }
    
    /* Touch Target Optimization */
    .mobile-nav-item,
    nav.fixed.bottom-0 a {
        min-width: 44px !important; /* Apple HIG recommendation */
        min-height: 44px !important;
        padding: 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0.5rem !important;
        transition: all 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Active State for Navigation */
    .mobile-nav-item.active i,
    .mobile-nav-item.active .fas,
    nav.fixed.bottom-0 a.active i {
        color: #ffffff !important; /* Green for active state */
        transform: scale(1.1) !important;
    }
    
    /* Text Labels in Mobile Nav */
    .mobile-nav-item span,
    nav.fixed.bottom-0 a span {
        font-size: 0.75rem !important; /* 12px */
        font-weight: 500 !important;
        line-height: 1 !important;
        margin-top: 0.25rem !important;
        text-align: center !important;
        color: inherit !important;
    }
}

/* ===== SPECIFIC ICON CONTENT FIXES ===== */
/* Ensure specific icons have proper Unicode content */
.fa-home:before { content: "\f015" !important; }
.fa-store:before { content: "\f54e" !important; }
.fa-shopping-cart:before { content: "\f07a" !important; }
.fa-heart:before { content: "\f004" !important; }
.fa-user:before { content: "\f007" !important; }
.fa-bars:before { content: "\f0c9" !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-star:before { content: "\f005" !important; }
.fa-crown:before { content: "\f521" !important; }

/* ===== FALLBACK EMOJI SYSTEM ===== */
/* If FontAwesome fails, show emoji fallbacks */
@supports not (font-family: 'Font Awesome 5 Free') {
    .fa-home:after { content: "🏠"; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
    .fa-store:after { content: "🏪"; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
    .fa-shopping-cart:after { content: "🛒"; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
    .fa-heart:after { content: "💚"; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
    .fa-user:after { content: "👤"; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
}

/* ===== DESKTOP COMPATIBILITY ===== */
@media (min-width: 769px) {
    /* Hide mobile navigation on desktop */
    nav.fixed.bottom-0,
    .mobile-bottom-nav,
    .mobile-nav-test {
        display: none !important;
    }
    
    /* Remove mobile-specific body padding */
    body {
        padding-bottom: 0 !important;
    }
    
    /* Desktop icon sizing */
    .fas, .far, .fab {
        font-size: 1rem !important; /* 16px default for desktop */
    }
    
    /* Desktop navigation icons */
    .navbar .fas,
    .desktop-nav .fas,
    header .fas {
        font-size: 1.125rem !important; /* 18px for header icons */
        margin-right: 0.5rem !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Reduce repaints and improve performance */
.fas, .far, .fab, [class*="fa-"] {
    will-change: auto !important;
    contain: layout style !important;
}

/* ===== DEBUG MODE (Uncomment for debugging) ===== */
/*
.debug-icons .fas:after,
.debug-icons .far:after,
.debug-icons .fab:after {
    content: " [FA]" !important;
    font-family: monospace !important;
    font-size: 0.5em !important;
    color: red !important;
    font-weight: normal !important;
}

.debug-icons [class*="fa-"]:empty:after {
    content: "MISSING" !important;
    font-family: monospace !important;
    font-size: 8px !important;
    color: red !important;
    background: yellow !important;
    padding: 2px !important;
    border: 1px solid red !important;
    position: absolute !important;
    top: -15px !important;
    left: 0 !important;
    z-index: 999 !important;
}
*/

/* ===== PRINT STYLES ===== */
@media print {
    .fas, .far, .fab, [class*="fa-"] {
        display: none !important;
    }
    
    nav.fixed.bottom-0,
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Mobile Bottom Navigation Styles - Updated */
        nav.fixed.bottom-0 {
            background: #15803d !important; /* Dark green solid background */
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mobile-nav-item {
            min-width: 60px;
            transition: all 0.3s ease;
            position: relative;
            padding: 8px;
            border-radius: 12px;
            color: white; /* Default white color */
        }

        .mobile-nav-item:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.1);
        }

        /* Default state - White icons and text */
        .mobile-nav-item i,
        .mobile-nav-item span {
            color: white !important;
            transition: color 0.3s ease;
        }

        /* Active state - Yellow for regular items */
        .mobile-nav-item.active:not(.home-center-circle) i,
        .mobile-nav-item.active:not(.home-center-circle) span {
            color: #e3eb02 !important; /* Yellow for active regular items */
        }

        /* Home button special styling */
        .home-center-circle {
            transition: all 0.3s ease;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
        }

        .home-center-circle:hover {
            transform: translateY(-4px);
            filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
        }

        .home-center-circle:active {
            transform: translateY(-2px) scale(0.98);
        }

        /* Home button - white circle with dark green icon */
        .home-center-circle .bg-white {
            background: white !important;
            border: 2px solid #15803d;
        }

        .home-center-circle i {
            color: #15803d !important; /* Dark green for home icon */
        }

        .home-center-circle span {
            color: white !important; /* White text for home */
        }

        /* When home is active - make it dark yellow */
        .home-center-circle.active i {
            color: #d97706 !important; /* Dark yellow when home is active */
        }

        .home-center-circle.active span {
            color: #d97706 !important; /* Dark yellow text when home is active */
        }

        /* Online indicator pulse animation */
        @keyframes pulse-yellow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        .mobile-nav-item .absolute.bg-yellow-400 {
            animation: pulse-yellow 2s ease-in-out infinite;
        }

        /* Touch targets */
        .mobile-nav-item {
            min-width: 44px;
            min-height: 44px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
        }

        /* Text styling */
        .mobile-nav-item span {
            font-weight: 500;
            font-size: 0.75rem;
            text-align: center;
            margin-top: 4px;
        }

        /* Hide on desktop */
        @media (min-width: 768px) {
            nav.fixed.bottom-0 {
                display: none !important;
            }
        }

        /* Demo page styling */
        body {
            font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
        }

        /* Ensure proper icon rendering */
        .fas, .fa-solid {
            font-family: 'Font Awesome 6 Free' !important;
            font-weight: 900 !important;
            font-style: normal !important;
            display: inline-block !important;
            line-height: 1 !important;
            text-rendering: auto !important;
            -webkit-font-smoothing: antialiased !important;
        }

/* ===== END OF MOBILE ICON UNIFIED FIX ===== */