/* Icon Base Styles - Replacement for FontAwesome */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em; /* Align with text baseline */
  fill: currentColor; /* Inherit text color */
  flex-shrink: 0;
}

/* Social Media Icons - typically used at default size (1em) */
.icon-facebook,
.icon-twitter,
.icon-instagram,
.icon-tiktok {
  width: 1em;
  height: 1em;
}

/* App Store Icons */
.icon-google-play,
.icon-apple {
  width: 1em;
  height: 1em;
}

/* UI Icons */
.icon-bars {
  width: 1.5em; /* fa-xl equivalent */
  height: 1.5em;
}

.icon-close {
  width: 1em;
  height: 1em;
}

/* Size variants to match FontAwesome classes */
.icon-sm {
  width: 0.875em;
  height: 0.875em;
}

.icon-lg {
  width: 1.33em;
  height: 1.33em;
}

.icon-xl {
  width: 1.5em;
  height: 1.5em;
}

.icon-2x {
  width: 2em;
  height: 2em;
}

.icon-3x {
  width: 3em;
  height: 3em;
}

/* Ensure icons work well in buttons */
a .icon,
button .icon {
  display: inline-block;
}

/* Maintain spacing with text */
.icon + span,
span + .icon {
  margin-left: 0.25em;
}