.fa-solid, .fas, .fab {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  vertical-align: middle;
  font-style: normal;
  speak: none;
}

/* Hide FontAwesome generated glyphs (they can sit on top of our background SVGs).
   Keep the element visible so background-image (data-URI SVG using currentColor)
   still paints; the pseudo-element before/after from FA should be removed. */
.fa-solid::before, .fas::before, .fab::before,
.fa-solid::after, .fas::after, .fab::after {
  display: none !important;
  content: none !important;
}

/* Ensure icon elements pass their color into the embedded SVG via currentColor */
.fa-solid, .fas, .fab {
  color: inherit !important;
}

/* Removed: inline data-URI SVG background-image declarations
   We now use inline <svg> in markup and color via fill="currentColor".
   The blocks removed were for: trophy, map-pin, phone, envelope,
   building-columns and a few social glyph background-images. */

/* Ensure icons scale nicely inside .circle-icon */
.circle-icon { background-size: 60% 60%; background-position: center; }

/* If JS loads FontAwesome later, these local rules should not conflict badly */

/* Context-specific colors and utility modifiers
   - Use `.site-header .fa-map-pin` (or your real header selector) to force white in header.
   - Use `.mobile-sticky-icons .fa-map-pin` for the mobile sticky area.
   - Use modifier classes `.icon--white` / `.icon--accent` for direct control on elements.
*/
.site-header .fa-map-pin {
  color: #ffffff; /* header: white */
}
.mobile-sticky-icons .fa-map-pin {
  color: #ffcc00; /* mobile sticky: accent (change as needed) */
}

/* Utility modifier classes */
.icon--white { color: #ffffff; }
.icon--accent { color: #ffcc00; }

/* Explicit overrides for real containers used in templates */
/* Top bar: address/map icons should be white on the dark top bar */
.top-bar .fa-map-pin,
.top-bar .fa-location-dot,
.top-bar .address i {
  color: #ffffff !important;
}

/* Even more specific: target the topBar ID to ensure header icons stay white
   (this beats other competing rules without touching global !important usage) */
#topBar .address i.fa-map-pin,
#topBar .address i.fa-location-dot {
  color: #ffffff !important;
}

.svg-icon { width:1em; height:1em; vertical-align:middle; display:inline-block; }

/* mobile sticky: default alb */
.mobile-sticky-icons a { color: #ffffff; }

/* dacă vrei un pin portocaliu în ultima poziție */
.mobile-sticky-icons a:last-child .svg-icon { color: #ff6b35; }

/* utilitare */
.icon--white { color:#fff; }
.icon--accent { color:#ff6b35; }/* forțează culoarea pentru sticky (folosește !important doar dacă e absolut necesar) */
.mobile-sticky-icons a { color: #fff !important; }
.mobile-sticky-icons a:last-child .svg-icon { color: #ff6b35 !important; }/* Top bar: we keep a specific color rule; SVGs use currentColor so no deterministic background-image is needed */
#topBar .address i.fa-map-pin,
#topBar .address i.fa-location-dot {
  /* color is set above; SVGs use fill="currentColor" */
  color: #ffffff !important;
}

/* Make mobile sticky icons larger for better touch targets and visibility */
.mobile-sticky-icons {
  /* slightly larger base font-size so em-based icons scale naturally */
  font-size: 1.15rem;
}
.mobile-sticky-icons .svg-icon {
  width: 1.3em;
  height: 1.3em;
}

/* Ensure phone icon inside the top-bar phone button uses the phone color defined by .top-bar .phone */
.top-bar .phone i,
.top-bar .phone .fa-phone-volume,
.top-bar .phone .fa-phone {
  color: inherit !important;
}

/* Mobile sticky icons: target inline SVGs (we replaced <i> with inline <svg>) */
.mobile-sticky-icons a:first-child .svg-icon,
.mobile-sticky-icons a:first-child .icon-phone { color: #FCBA12 !important; }
.mobile-sticky-icons a:last-child .svg-icon,
.mobile-sticky-icons a:last-child .icon-location-dot { color: #ff6b35 !important; }

/* Mobile sticky: use color rules and rely on SVGs with fill="currentColor" rather than hardcoded data-URI fills */