.elementor-21 .elementor-element.elementor-element-8fa8c8d{--display:flex;--min-height:80px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-21 .elementor-element.elementor-element-8fa8c8d:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-8fa8c8d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-21 .elementor-element.elementor-element-f3f6e59{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;}.elementor-21 .elementor-element.elementor-element-f3f6e59.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-21 .elementor-element.elementor-element-e4f9b52{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;}.elementor-21 .elementor-element.elementor-element-e4f9b52:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-e4f9b52 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#74A2FF00;}.elementor-21 .elementor-element.elementor-element-e4f9b52.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-21 .elementor-element.elementor-element-fe28861 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-21 .elementor-element.elementor-element-fe28861{z-index:2;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-21 .elementor-element.elementor-element-f3f6e59{--width:70%;}.elementor-21 .elementor-element.elementor-element-e4f9b52{--width:30%;}}/* Start custom CSS for html, class: .elementor-element-fe28861 *//* ============================================= */
/* User Favorite Count Heart Display (Outline)   */
/* ============================================= */

.user-favorites-heart-counter {
  position: relative; /* Establishes positioning context */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;  /* Adjust based on outline size */
  min-height: 40px; /* Adjust based on outline size */
  padding: 5px;
  font-weight: bold;
  font-size: 16px;    /* Adjust number size */
  /* IMPORTANT: Set the text color you want for the NUMBER */
  /* If the background behind the widget is dark, white is good. */
  /* If the background is light, you might need a dark color like black or grey. */
  color: white !important; /* Or #333, etc. depending on your page background */
  line-height: 1;
  text-align: center;
  z-index: 2; /* Ensure number container is above the outline */
  box-sizing: border-box;
  background: none; /* Ensure parent has no background covering the outline */
}

.user-favorites-heart-counter::before {
  content: "\f004"; /* Font Awesome heart unicode */
  /* CRITICAL: Use the correct Font Awesome family */
  font-family: "Font Awesome 5 Free"; /* Or "Font Awesome 6 Free", etc. */
  /* CRITICAL: Use weight 400 for the REGULAR/OUTLINE style */
  font-weight: 400;
  font-size: 40px; /* Size of the heart OUTLINE - Adjust as needed */
  /* Set the color of the heart OUTLINE */
  color: white; /* Or your desired outline color */

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Position the outline behind the number container */
  line-height: 1;
}

.elementor-21 .elementor-element.elementor-element-fe28861 .user-favorites-heart-counter {
    mix-blend-mode: difference;
    color: white;
    background: transparent;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
}


/* --- Font Awesome Note --- */
/* This relies on Font Awesome being loaded correctly (usually v5 or v6 Free). */
/* Ensure the font-family matches your site's setup and includes the Regular style. */
/* If the heart doesn't appear or is solid, check the font-family and font-weight. */

/* --- Text Visibility Note --- */
/* If the number is hard to read, ensure its 'color' contrasts well */
/* with the page background visible *through* the heart outline. *//* End custom CSS */