/* Font Display Optimization - Override Font Awesome for FCP Improvement */

/* Override Font Awesome font faces to use swap instead of block */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* ✅ Immediate fallback instead of blocking */
  src: local("Arial"), local("sans-serif"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-regular-400.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-regular-400.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap; /* ✅ Immediate fallback instead of blocking */
  src: local("Arial"), local("sans-serif"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-solid-900.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-solid-900.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* ✅ Immediate fallback instead of blocking */
  src: local("Arial"), local("sans-serif"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-brands-400.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-brands-400.ttf) format("truetype");
}

/* Override legacy Font Awesome 5 font faces */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src: local("Arial"), local("sans-serif"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-solid-900.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-solid-900.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("sans-serif"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-regular-400.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-regular-400.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-display: swap;
  font-weight: 400;
  src: local("Arial"), local("sans-serif"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-brands-400.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-brands-400.ttf) format("truetype");
}

/* Override FontAwesome legacy font faces */
@font-face {
  font-family: "FontAwesome";
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src: local("Arial"), local("sans-serif"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-solid-900.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/webfonts/fa-solid-900.ttf) format("truetype");
}

/* Prevent layout shifts during font swap */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, 
.fa-light, .fa-thin, .fa-duotone {
  /* Consistent dimensions to prevent layout shifts */
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  /* Prevent size changes during font swap */
  font-size: 1em;
  line-height: 1;
  /* Smooth transition when font loads */
  transition: opacity 0.2s ease;
  /* Ensure proper display */
  display: inline-block;
}

/* Font loading states */
.fa-fonts-loading .fa,
.fa-fonts-loading .fas,
.fa-fonts-loading .far,
.fa-fonts-loading .fab {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.fa-fonts-loaded .fa,
.fa-fonts-loaded .fas,
.fa-fonts-loaded .far,
.fa-fonts-loaded .fab {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.fa-fonts-fallback .fa,
.fa-fonts-fallback .fas,
.fa-fonts-fallback .far,
.fa-fonts-fallback .fab {
  /* Use system fonts as ultimate fallback */
  font-family: Arial, sans-serif !important;
}

/* Icon placeholders for critical icons during loading */
.fa-shopping-cart:not(.fa-loaded):before { content: "🛒"; }
.fa-user:not(.fa-loaded):before { content: "👤"; }
.fa-search:not(.fa-loaded):before { content: "🔍"; }
.fa-heart:not(.fa-loaded):before { content: "❤️"; }
.fa-bars:not(.fa-loaded):before { content: "☰"; }
.fa-chevron-left:not(.fa-loaded):before { content: "◀"; }
.fa-chevron-right:not(.fa-loaded):before { content: "▶"; }
.fa-arrow-right:not(.fa-loaded):before { content: "→"; }
.fa-times:not(.fa-loaded):before { content: "✕"; }
.fa-check:not(.fa-loaded):before { content: "✓"; }
.fa-star:not(.fa-loaded):before { content: "⭐"; }
.fa-shopping-bag:not(.fa-loaded):before { content: "🛍️"; }
.fa-filter:not(.fa-loaded):before { content: "🔽"; }
.fa-sort:not(.fa-loaded):before { content: "🔽"; }
.fa-envelope:not(.fa-loaded):before { content: "✉️"; }
.fa-phone:not(.fa-loaded):before { content: "📞"; }
.fa-map-marker-alt:not(.fa-loaded):before { content: "📍"; }
.fa-clock:not(.fa-loaded):before { content: "🕐"; }
.fa-calendar:not(.fa-loaded):before { content: "📅"; }
.fa-tag:not(.fa-loaded):before { content: "🏷️"; }
.fa-truck:not(.fa-loaded):before { content: "🚚"; }
.fa-shield-alt:not(.fa-loaded):before { content: "🛡️"; }
.fa-credit-card:not(.fa-loaded):before { content: "💳"; }

/* Hide emoji placeholders when font loads */
.fa-loaded.fa-shopping-cart:before { content: "\f07a"; }
.fa-loaded.fa-user:before { content: "\f007"; }
.fa-loaded.fa-search:before { content: "\f002"; }
.fa-loaded.fa-heart:before { content: "\f004"; }
.fa-loaded.fa-bars:before { content: "\f0c9"; }
.fa-loaded.fa-chevron-left:before { content: "\f053"; }
.fa-loaded.fa-chevron-right:before { content: "\f054"; }
.fa-loaded.fa-arrow-right:before { content: "\f061"; }
.fa-loaded.fa-times:before { content: "\f00d"; }
.fa-loaded.fa-check:before { content: "\f00c"; }
.fa-loaded.fa-star:before { content: "\f005"; }
.fa-loaded.fa-shopping-bag:before { content: "\f290"; }
.fa-loaded.fa-filter:before { content: "\f0b0"; }
.fa-loaded.fa-sort:before { content: "\f0dc"; }
.fa-loaded.fa-envelope:before { content: "\f0e0"; }
.fa-loaded.fa-phone:before { content: "\f095"; }
.fa-loaded.fa-map-marker-alt:before { content: "\f3c5"; }
.fa-loaded.fa-clock:before { content: "\f017"; }
.fa-loaded.fa-calendar:before { content: "\f133"; }
.fa-loaded.fa-tag:before { content: "\f02b"; }
.fa-loaded.fa-truck:before { content: "\f0d1"; }
.fa-loaded.fa-shield-alt:before { content: "\f3ed"; }
.fa-loaded.fa-credit-card:before { content: "\f09d"; }

/* Ensure proper icon sizing in different contexts */
.btn .fa,
.btn .fas,
.btn .far,
.btn .fab {
  /* Consistent sizing in buttons */
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.navbar .fa,
.navbar .fas,
.navbar .far,
.navbar .fab {
  /* Proper alignment in navigation */
  vertical-align: -0.125em;
}

.card .fa,
.card .fas,
.card .far,
.card .fab {
  /* Consistent sizing in cards */
  width: 1em;
  height: 1em;
}

/* Responsive font loading optimization */
@media (max-width: 768px) {
  .fa, .fas, .far, .fab {
    /* Slightly faster transition on mobile */
    transition: opacity 0.1s ease;
  }
}

/* High DPI display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .fa, .fas, .far, .fab {
    /* Ensure crisp rendering on high DPI displays */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}