/* FONTAWESOME CLASSIC SOLID SYSTEM - ระบบ FontAwesome Classic สำหรับทั้งเว็บไซต์ */
/* Based on https://fontawesome.com/search?ip=classic&f=classic&s=solid&o=r */

/* ===== FONTAWESOME 5 CLASSIC SOLID LOADING ===== */
/* Primary CDN - FontAwesome 5.15.4 Classic */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* Backup CDN Sources */
@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');
/* Remove duplicate import - already loaded above */

/* Local Font Face Definitions */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    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://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    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://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.woff2') format('woff2');
}

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

/* ===== UNIVERSAL FONTAWESOME CLASSIC SOLID STYLES ===== */
/* Force all FontAwesome icons to use Classic Solid style */
.fas, .fa-solid,
.far, .fa-regular,
.fab, .fa-brands,
.fal, .fa-light,
[class*="fa-"],
i[class*="fa-"] {
    /* Font Properties - Classic Solid Priority */
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome', sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    speak: none !important;
    
    /* Ensure proper rendering */
    text-decoration: none !important;
    text-transform: none !important;
    vertical-align: baseline !important;
}

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

/* Regular icons specific styling */
.far, .fa-regular,
.far[class*="fa-"], .fa-regular[class*="fa-"] {
    font-family: 'Font Awesome 5 Regular' !important;
    font-weight: 400 !important;
}

/* ===== CLASSIC SOLID ICON MAPPINGS ===== */
/* Comprehensive list of Classic Solid icons from FontAwesome */

/* Navigation & UI Icons */
.fa-home:before { content: "\f015" !important; }
.fa-user:before { content: "\f007" !important; }
.fa-cog:before { content: "\f013" !important; }
.fa-search:before { content: "\f002" !important; }
.fa-bars:before { content: "\f0c9" !important; }
.fa-times:before { content: "\f00d" !important; }
.fa-plus:before { content: "\f067" !important; }
.fa-minus:before { content: "\f068" !important; }
.fa-edit:before { content: "\f044" !important; }
.fa-trash:before { content: "\f1f8" !important; }
.fa-save:before { content: "\f0c7" !important; }
.fa-download:before { content: "\f019" !important; }
.fa-upload:before { content: "\f093" !important; }
.fa-print:before { content: "\f02f" !important; }

/* E-commerce Icons */
.fa-shopping-cart:before { content: "\f07a" !important; }
.fa-shopping-bag:before { content: "\f290" !important; }
.fa-store:before { content: "\f54e" !important; }
.fa-credit-card:before { content: "\f09d" !important; }
.fa-money-bill:before { content: "\f0d6" !important; }
.fa-tag:before { content: "\f02b" !important; }
.fa-tags:before { content: "\f02c" !important; }
.fa-gift:before { content: "\f06b" !important; }
.fa-heart:before { content: "\f004" !important; }
.fa-star:before { content: "\f005" !important; }

/* Communication Icons */
.fa-phone:before { content: "\f095" !important; }
.fa-envelope:before { content: "\f0e0" !important; }
.fa-comment:before { content: "\f075" !important; }
.fa-comments:before { content: "\f086" !important; }
.fa-inbox:before { content: "\f01c" !important; }
.fa-bell:before { content: "\f0f3" !important; }

/* Location & Map Icons */
.fa-map-marker-alt:before { content: "\f3c5" !important; }
.fa-map:before { content: "\f279" !important; }
.fa-globe:before { content: "\f0ac" !important; }
.fa-compass:before { content: "\f14e" !important; }

/* Media & File Icons */
.fa-image:before { content: "\f03e" !important; }
.fa-camera:before { content: "\f030" !important; }
.fa-video:before { content: "\f03d" !important; }
.fa-music:before { content: "\f001" !important; }
.fa-file:before { content: "\f15b" !important; }
.fa-folder:before { content: "\f07b" !important; }
.fa-archive:before { content: "\f187" !important; }

/* Status & Feedback Icons */
.fa-check:before { content: "\f00c" !important; }
.fa-check-circle:before { content: "\f058" !important; }
.fa-times-circle:before { content: "\f057" !important; }
.fa-exclamation-triangle:before { content: "\f071" !important; }
.fa-info-circle:before { content: "\f05a" !important; }
.fa-question-circle:before { content: "\f059" !important; }

/* Arrow & Direction Icons */
.fa-arrow-up:before { content: "\f062" !important; }
.fa-arrow-down:before { content: "\f063" !important; }
.fa-arrow-left:before { content: "\f060" !important; }
.fa-arrow-right:before { content: "\f061" !important; }
.fa-chevron-up:before { content: "\f077" !important; }
.fa-chevron-down:before { content: "\f078" !important; }
.fa-chevron-left:before { content: "\f053" !important; }
.fa-chevron-right:before { content: "\f054" !important; }

/* Time & Calendar Icons */
.fa-clock:before { content: "\f017" !important; }
.fa-calendar:before { content: "\f073" !important; }
.fa-calendar-alt:before { content: "\f133" !important; }

/* Business & Office Icons */
.fa-briefcase:before { content: "\f0b1" !important; }
.fa-building:before { content: "\f1ad" !important; }
.fa-industry:before { content: "\f275" !important; }
.fa-chart-bar:before { content: "\f080" !important; }
.fa-chart-line:before { content: "\f201" !important; }
.fa-chart-pie:before { content: "\f200" !important; }

/* Transport & Travel Icons */
.fa-car:before { content: "\f1b9" !important; }
.fa-truck:before { content: "\f0d1" !important; }
.fa-plane:before { content: "\f072" !important; }
.fa-ship:before { content: "\f21a" !important; }
.fa-bicycle:before { content: "\f206" !important; }

/* Health & Medical Icons */
.fa-heart-pulse:before { content: "\f21e" !important; }
.fa-stethoscope:before { content: "\f0f1" !important; }
.fa-pills:before { content: "\f484" !important; }
.fa-syringe:before { content: "\f48e" !important; }

/* Nature & Environment Icons */
.fa-leaf:before { content: "\f06c" !important; }
.fa-tree:before { content: "\f1bb" !important; }
.fa-sun:before { content: "\f185" !important; }
.fa-moon:before { content: "\f186" !important; }
.fa-cloud:before { content: "\f0c2" !important; }

/* ===== SYSTEM-WIDE ICON COLORS ===== */
/* Default color scheme for Classic Solid icons */

/* Primary Icons - Green Theme */
.fas, .far, .fab, [class*="fa-"] {
    color: #22c55e !important; /* Default green */
}

/* Navigation Icons - White for navigation bars */
.navbar .fas, .navbar [class*="fa-"],
.nav .fas, .nav [class*="fa-"],
.mobile-nav-item i,
.mobile-bottom-nav i,
.desktop-header .nav-link i,
.desktop-header .mobile-nav-item i,
.desktop-header .bg-white\\/20 i {
    color: white !important;
}

/* E-commerce Specific Colors */
.fa-shopping-cart, .fa-shopping-bag { color: #22c55e !important; }
.fa-heart { color: #ef4444 !important; }
.fa-star { color: #f59e0b !important; }

/* Logo Icon - Always Green */
.desktop-header .fa-leaf.text-emerald-600,
.mobile-top-bar .fa-leaf.text-emerald-600,
.fa-leaf.text-emerald-600 {
    color: #059669 !important; /* emerald-600 color */
}
.fa-store { color: #6366f1 !important; }
.fa-credit-card { color: #3b82f6 !important; }

/* Status Colors */
.fa-check, .fa-check-circle { color: #10b981 !important; }
.fa-times, .fa-times-circle { color: #ef4444 !important; }
.fa-exclamation-triangle { color: #f59e0b !important; }
.fa-info-circle { color: #3b82f6 !important; }

/* Communication Colors */
.fa-phone { color: #10b981 !important; }
.fa-envelope { color: #3b82f6 !important; }
.fa-comment, .fa-comments { color: #6366f1 !important; }

/* 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-instagram { color: #e4405f !important; }
.fab.fa-twitter { color: #1da1f2 !important; }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    /* Mobile optimizations for Classic Solid icons */
    .fas, .far, .fab, [class*="fa-"] {
        font-size: inherit !important;
        min-width: 1em !important;
        text-align: center !important;
    }
    
    /* Mobile navigation icons */
    .mobile-nav-item i,
    .mobile-bottom-nav i {
        font-size: 1.25rem !important;
        display: block !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Mobile touch targets */
    .btn i, button i {
        margin-right: 0.5rem !important;
    }
}

@media (min-width: 769px) {
    /* Desktop optimizations */
    .desktop-header i {
        font-size: 1.125rem !important;
        margin-right: 0.5rem !important;
    }
    
    /* Hover effects for desktop */
    .btn:hover i, button:hover i {
        transform: scale(1.1) !important;
        transition: transform 0.2s ease !important;
    }
}

/* ===== ICON SIZES ===== */
/* Standardized icon sizes across the system */
.fa-xs { font-size: 0.75em !important; }
.fa-sm { font-size: 0.875em !important; }
.fa-lg { font-size: 1.25em !important; }
.fa-xl { font-size: 1.5em !important; }
.fa-2x { font-size: 2em !important; }
.fa-3x { font-size: 3em !important; }
.fa-4x { font-size: 4em !important; }
.fa-5x { font-size: 5em !important; }

/* ===== ANIMATION EFFECTS ===== */
/* Classic icon animations */
.fa-spin {
    animation: fa-spin 2s infinite linear !important;
}

.fa-pulse {
    animation: fa-pulse 1s infinite steps(8) !important;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fa-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Hover animations */
.fa-hover:hover {
    animation: fa-pulse 0.5s ease-in-out !important;
}

/* ===== ACCESSIBILITY ===== */
/* Screen reader and accessibility improvements */
[class*="fa-"][aria-hidden="true"] {
    speak: none !important;
}

[class*="fa-"]:not([aria-hidden]) {
    speak: auto !important;
}

/* Focus states for keyboard navigation */
button:focus i,
a:focus i,
.btn:focus i {
    outline: 2px solid #22c55e !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* ===== PRINT STYLES ===== */
@media print {
    /* Hide decorative icons in print */
    [class*="fa-"]:not(.fa-print):not(.fa-file):not(.fa-document) {
        display: none !important;
    }
    
    /* Show only essential icons in print */
    .fa-print, .fa-file, .fa-document {
        color: black !important;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .fas, .far, .fab, [class*="fa-"] {
        color: #86efac !important; /* Light green for dark mode */
    }
    
    /* Maintain brand colors in dark mode */
    .fab.fa-facebook-f { color: #1877f2 !important; }
    .fab.fa-line { color: #00b900 !important; }
    .fab.fa-youtube { color: #ff0000 !important; }
    
    /* White icons for navigation in dark mode */
    .navbar i, .nav i, .mobile-nav-item i {
        color: white !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* CSS containment for better performance */
[class*="fa-"] {
    contain: style layout !important;
}

/* GPU acceleration for animations */
.fa-spin, .fa-pulse, .fa-hover:hover {
    will-change: transform !important;
    backface-visibility: hidden !important;
}

/* ===== FALLBACK SYSTEM ===== */
/* Emoji fallbacks if FontAwesome fails to load */
.fa-home:empty:after { content: "🏠" !important; font-family: system-ui !important; }
.fa-user:empty:after { content: "👤" !important; font-family: system-ui !important; }
.fa-shopping-cart:empty:after { content: "🛒" !important; font-family: system-ui !important; }
.fa-heart:empty:after { content: "❤️" !important; font-family: system-ui !important; }
.fa-star:empty:after { content: "⭐" !important; font-family: system-ui !important; }
.fa-phone:empty:after { content: "📞" !important; font-family: system-ui !important; }
.fa-envelope:empty:after { content: "✉️" !important; font-family: system-ui !important; }
.fa-search:empty:after { content: "🔍" !important; font-family: system-ui !important; }
.fa-bars:empty:after { content: "☰" !important; font-family: system-ui !important; }
.fa-times:empty:after { content: "✕" !important; font-family: system-ui !important; }

/* ===== CRITICAL OVERRIDE ===== */
/* Highest specificity to ensure Classic Solid icons work */
html body * [class*="fa-"],
html body * .fas,
html body * .far,
html body * .fab {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome', Arial, sans-serif !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Brand icons override */
html body * .fab {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}

/* Regular icons override */
html body * .far {
    font-family: 'Font Awesome 5 Regular' !important;
    font-weight: 400 !important;
}