/* Font Awesome 4 compatibility fixes */
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fix for star-o icon - multiple ways to define it for better compatibility */
.fa-star-o:before {
  content: "\f006" !important;
}

/* Custom card specific fix */
.custom-card .position-a .fa-star-o:before,
.position-a .fa-star-o:before {
  content: "\f006" !important;
  display: inline-block !important;
  font-family: FontAwesome !important;
}

/* Change star-o to star on hover */
#recommended .position-a:hover .fa-star-o:before {
  content: "\f005" !important; /* fa-star (filled star) code */
}

/* Direct star SVG replacement if needed */
.star-icon-fallback {
  width: 20px;
  height: 20px;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fix for calendar icon */
.fa-calendar:before {
  content: "\f073";
}

/* Fix for eye icon */
.fa-eye:before {
  content: "\f06e";
}

/* Fix for heart icon */
.fa-heart:before {
  content: "\f004" !important;
  color: var(--dark-yellow);
}

/* Fix for heart-o icon - similar to star-o */
.fa-heart-o:before {
  content: "\f08a" !important;
}

/* Custom card specific fix for heart-o */
.custom-card .position-a .fa-heart-o:before,
.position-a .fa-heart-o:before,
.hearth .fa-heart-o:before {
  content: "\f08a" !important;
  display: inline-block !important;
  font-family: FontAwesome !important;
}

/* Change heart-o to heart on hover - general selector that works everywhere */
.hearth:hover .fa-heart-o:before,
.fa-heart-o:hover:before,
#recommended .position-a:hover .fa-heart-o:before,
.ad-card .hearth:hover .fa-heart-o:before {
  content: "\f004" !important; /* fa-heart (filled heart) code */
  color: var(--dark-yellow); /* Add color change on hover */
}

/* ADDED: Change heart to heart-o on hover - reverse effect */
.hearth:hover .fa-heart:before,
.fa-heart:hover:before,
#recommended .position-a:hover .fa-heart:before,
.ad-card .hearth:hover .fa-heart:before {
  content: "\f08a" !important; /* fa-heart-o (outline heart) code */
  color: var(--dark-yellow); /* Keep same hover color for consistency */
}

/* Add transition for smooth hover effect */
.fa-heart-o,
.fa-heart {
  transition: all 0.2s ease;
}