/* Custom minimal icon set derived from FontAwesome - enhanced styling */
@font-face {
  font-family: 'CustomIcons';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2') format('woff2');
  /* Include all icon unicode ranges we need */
  unicode-range: U+f1b0, U+f53f, U+f1fd, U+f228, U+f06e, U+f3c5, U+f0e0, U+f1e0, U+f559, U+f004, U+f00d;
}

/* Base FontAwesome styles with enhanced styling */
.fas, .icon-simple {
  font-family: 'CustomIcons', sans-serif;
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Icon hover effect */
.icon-simple:hover {
  transform: scale(1.15);
  color: var(--light-red);
}

/* Cat info icons - Using direct content assignment instead of relying on class toggles */
.icon-paw:before {
  content: "\f1b0";
}

.icon-palette:before {
  content: "\f53f";
}

.icon-age:before {
  content: "\f1fd";
}

.icon-gender:before {
  content: "\f228";
}

.icon-features:before {
  content: "\f06e";
}

.icon-location:before {
  content: "\f3c5";
}

/* Fallback icons - These will be used if the font fails to load */
@supports not (content: "\f1b0") {
  .icon-paw:before { content: "🐾"; }
  .icon-palette:before { content: "🎨"; }
  .icon-age:before { content: "🎂"; }
  .icon-gender:before { content: "⚥"; }
  .icon-features:before { content: "👁️"; }
  .icon-location:before { content: "📍"; }
}

/* Standard FontAwesome classes */
.fa-paw:before {
  content: "\f1b0";
}

.fa-palette:before {
  content: "\f53f";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-map-marker-alt:before {
  content: "\f3c5";
}

/* Contact icons with enhanced styling */
.fa-envelope:before {
  content: "\f0e0";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-award:before {
  content: "\f559";
}

/* Button icons */
.fa-heart:before {
  content: "\f004";
}

.fa-times:before {
  content: "\f00d";
}

/* Modern icon container for buttons and links */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--light-red);
  color: var(--white);
  margin-right: 10px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.icon-container:hover {
  background-color: var(--primary-red);
  transform: scale(1.1);
}

/* Fallback for any missing icon */
.fa-heart, .fa-times, .fa-envelope, .fa-share-alt, .fa-award, 
.fa-paw, .fa-palette, .fa-birthday-cake, .fa-venus-mars, .fa-eye, .fa-map-marker-alt,
.icon-paw, .icon-palette, .icon-age, .icon-gender, .icon-features, .icon-location {
  display: inline-block;
}

/* Fix for icon vertical alignment */
.icon-padding, .fas, .icon-simple {
  vertical-align: middle;
}

/* Extra specificity to ensure icons display properly */
i.fas, span.icon-simple {
  font-family: 'CustomIcons', sans-serif !important;
}