:root {
    --gold-color:#FFD211;
    --star-size:1.5em;
}

.rating_star
{
    font-size:32px;
    cursor:pointer;
}
.star_active
{
color: var(--gold-color);
}
.heart_active
{
    color:#CA1D5F;
}
.heart_active_light
{
    color:#D33B6B;
}
.star_inactive
{
    color :#D3D3D3;
}

/* /\* star rating stuff *\/ */
.star-rating {
  font-size: 2rem; /* Adjust size of stars */
  color: gray;
  display: inline-flex; /* Align stars in a row */
  align-items: center; /* Center stars vertically */
  flex-wrap: nowrap; /* Prevent wrapping of stars */
  margin-bottom: 2.5rem; /* Space below the star-rating div */
}

.star-new {
  display: inline-block;
  position: relative;
  margin-right: 2rem; /* Adjust the space between star-news */
}

.star-new::before {
  position: absolute;
}

.star-new.full::before,
.star-new.partial::before {
  content: '\2605'; /* Solid star-new */
  color: var(--gold-color);;/* gold; */
  /* text-shadow: 0 0 1px black; /\* Faux border effect *\/  */
}

.star-new.partial::before {
  overflow: hidden;
  display: block;
  width: calc(var(--partial-value) * 1em); /* Adjust based on data-value */
}

.star-new.empty::before {
  content: '\2605'; /* Empty star-new, assuming you have a Unicode for it */
  color:#D3D3D3;
  /* color: currentColor; */
}

/* start svg */

.star-rating-svg {
  font-size: 1.2em;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  /* margin-bottom: 10px; */
}

.star-new-svg {
  width: var(--star-size); /* Adjust as needed */
  height: var(--star-size); /* Adjust as needed */
  margin-right: 4px;
}

svg.star-new-svg.full {
    fill: var(--gold-color); /* gold; /\* This will fill SVGs with class 'full' *\/ */
    stroke: var(--gold-color);
  stroke-width: 1;
}

.star-new-svg.partial {
  position: relative;
}

.star-new-svg.partial svg.full {
      clip-path: inset(0 calc(100% - var(--partial-value) * var(--star-size) ) 0 0);
      vertical-align:top;
}

.star-new-svg.partial svg.empty {
  fill: none;
  stroke: var(--gold-color);
  stroke-width: 1;
  position: absolute;
  top: 0;
  left: 0;
}

svg.star-new-svg.empty {
  fill: none;
  stroke: var(--gold-color);
  stroke-width: 1;
}