/* 
 * FontAwesome Optimization CSS
 * ปรับปรุงประสิทธิภาพการแสดงผลไอคอน FontAwesome
 */

/* Font Display Optimization */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2') format('woff2');
}

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

/* Icon Performance Optimization */
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
    /* Optimize rendering */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Prevent layout shift */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    
    /* Smooth transitions */
    transition: all 0.2s ease;
}

/* Hover Effects */
.fas:hover,
.far:hover,
.fab:hover,
.fa-solid:hover,
.fa-regular:hover,
.fa-brands:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Specific Icon Optimizations */
.fa-chevron-right {
    /* Arrow icon optimization */
    margin-left: 0.5em;
    color: #666;
}

.fa-volume-up {
    /* Volume icon optimization */
    margin-right: 0.5em;
    color: #007cba;
}

.fa-star {
    /* Star icon optimization */
    color: #ffd700;
    margin-right: 0.5em;
}

.fa-envelope {
    /* Email icon optimization */
    color: #007cba;
    margin-right: 0.5em;
}

/* Social Media Icons */
.fa-facebook-f,
.fa-twitter,
.fa-youtube,
.fa-instagram,
.fa-tiktok,
.fa-line,
.fa-telegram-plane {
    /* Social icons optimization */
    margin-right: 0.5em;
    transition: all 0.3s ease;
}

.fa-facebook-f:hover { color: #1877f2; }
.fa-twitter:hover { color: #1da1f2; }
.fa-youtube:hover { color: #ff0000; }
.fa-instagram:hover { color: #e4405f; }
.fa-tiktok:hover { color: #000000; }
.fa-line:hover { color: #00b900; }
.fa-telegram-plane:hover { color: #0088cc; }

/* Responsive Optimization */
@media (max-width: 768px) {
    .fas,
    .far,
    .fab,
    .fa-solid,
    .fa-regular,
    .fa-brands {
        font-size: 0.9em;
    }
    
    .fa-chevron-right {
        margin-left: 0.3em;
    }
    
    .fa-volume-up,
    .fa-star,
    .fa-envelope {
        margin-right: 0.3em;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .fa-chevron-right {
        color: #ccc;
    }
    
    .fa-volume-up {
        color: #4a9eff;
    }
    
    .fa-star {
        color: #ffed4e;
    }
}

/* Loading State */
.fas.loading,
.far.loading,
.fab.loading {
    opacity: 0.5;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Critical Icons (load first) */
.fa-chevron-right,
.fa-volume-up,
.fa-star,
.fa-envelope {
    font-display: block;
}

/* Non-critical Icons (load later) */
.fa-facebook-f,
.fa-twitter,
.fa-youtube,
.fa-instagram,
.fa-tiktok,
.fa-line,
.fa-telegram-plane {
    font-display: swap;
}