/* ─────────────────────────────────────────────────────────────────────────
   LetCatch Icon System — replaces Font Awesome CDN
   SVG sprite: /assets/icons/sprite.svg
   ───────────────────────────────────────────────────────────────────────── */

/* Base SVG icon element */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  overflow: visible;
  flex-shrink: 0;
}

/* Allow Tailwind .hidden to override .icon's display — higher specificity wins */
.icon.hidden { display: none; }

/* ── Size modifiers (mirrors Font Awesome) ──────────────────────────────── */
.fa-2xs { font-size: 0.625em; }
.fa-xs  { font-size: 0.75em; }
.fa-sm  { font-size: 0.875em; }
.fa-lg  { font-size: 1.25em; line-height: 1; vertical-align: -0.075em; }
.fa-xl  { font-size: 1.5em;  line-height: 1; vertical-align: -0.125em; }
.fa-2xl { font-size: 2em;    line-height: 1; vertical-align: -0.1875em; }
.fa-1x  { font-size: 1em; }
.fa-2x  { font-size: 2em; }
.fa-3x  { font-size: 3em; }
.fa-4x  { font-size: 4em; }
.fa-5x  { font-size: 5em; }
.fa-6x  { font-size: 6em; }
.fa-7x  { font-size: 7em; }
.fa-8x  { font-size: 8em; }
.fa-9x  { font-size: 9em; }
.fa-10x { font-size: 10em; }

/* ── Fixed width ────────────────────────────────────────────────────────── */
.fa-fw {
  width: 1.25em;
  text-align: center;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fa-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fa-pulse-steps {
  0%    { transform: rotate(0deg); }
  12.5% { transform: rotate(45deg); }
  25%   { transform: rotate(90deg); }
  37.5% { transform: rotate(135deg); }
  50%   { transform: rotate(180deg); }
  62.5% { transform: rotate(225deg); }
  75%   { transform: rotate(270deg); }
  87.5% { transform: rotate(315deg); }
  100%  { transform: rotate(360deg); }
}
@keyframes fa-beat {
  0%, 90% { transform: scale(1); }
  45%     { transform: scale(1.25); }
}
@keyframes fa-fade {
  50% { opacity: 0.4; }
}
@keyframes fa-bounce {
  0%   { transform: scale(1,1) translateY(0); }
  10%  { transform: scale(1.1,.9) translateY(0); }
  30%  { transform: scale(.9,1.1) translateY(-0.5em); }
  50%  { transform: scale(1.05,.95) translateY(0); }
  57%  { transform: scale(1,1) translateY(-0.125em); }
  64%  { transform: scale(1,1) translateY(0); }
  100% { transform: scale(1,1) translateY(0); }
}
@keyframes fa-shake {
  0%   { transform: rotate(-15deg); }
  4%   { transform: rotate(15deg); }
  8%,24%  { transform: rotate(-18deg); }
  12%,28% { transform: rotate(18deg); }
  16%  { transform: rotate(-22deg); }
  20%  { transform: rotate(22deg); }
  32%  { transform: rotate(-12deg); }
  36%  { transform: rotate(12deg); }
  40%,100% { transform: rotate(0deg); }
}

.fa-spin         { animation: fa-spin 2s linear infinite; }
.fa-spin-pulse   { animation: fa-spin 1s steps(8) infinite; }
.fa-pulse        { animation: fa-spin 1s steps(8) infinite; }
.fa-beat         { animation: fa-beat 1s ease-in-out infinite; }
.fa-fade         { animation: fa-fade 2s ease-in-out infinite; }
.fa-bounce       { animation: fa-bounce 1s ease infinite; }
.fa-shake        { animation: fa-shake 1s ease-in-out infinite; }

/* ── Flip ───────────────────────────────────────────────────────────────── */
.fa-flip-horizontal  { transform: scaleX(-1); }
.fa-flip-vertical    { transform: scaleY(-1); }
.fa-flip-both        { transform: scale(-1); }

/* ── Rotation ───────────────────────────────────────────────────────────── */
.fa-rotate-90  { transform: rotate(90deg); }
.fa-rotate-180 { transform: rotate(180deg); }
.fa-rotate-270 { transform: rotate(270deg); }

/* ── Pull / border ──────────────────────────────────────────────────────── */
.fa-pull-left  { float: left; margin-right: 0.3em; }
.fa-pull-right { float: right; margin-left: 0.3em; }

.fa-border {
  border: 0.08em solid currentColor;
  border-radius: 0.1em;
  padding: 0.2em 0.25em 0.15em;
}