/* Base wrapper */
.fx-star-ratings{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  direction:ltr;
  position:relative;
  margin: 10px 0;
}

/* Stars group */
.fxsr-stars{
  display:inline-flex;
  font-size:0;
}

/* Each star */
.fxsr-stars a.star{
  display:inline-block;
  position:relative;
  width:var(--fxsr-size,22px);
  height:var(--fxsr-size,22px);
  margin:0 calc(var(--fxsr-gap,2px)/2);
  text-decoration:none;
  line-height:1;
  outline:0;
}

/* Star layers */
.fxsr-stars a.star .fxsr-star{
  position:relative;
  width:100%;
  height:100%;
  display:block;
}
.fxsr-stars a.star .fxsr-star::before,
.fxsr-stars a.star .fxsr-star::after{
  content:'';
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  pointer-events:none;
}
.fxsr-stars a.star .fxsr-star::before{ background-image:url('../svg/inactive.svg'); }
.fxsr-stars a.star .fxsr-star::after{
  background-image:url('../svg/selected.svg');
  clip-path:inset(0 calc(100% - var(--fxsr-fill,0%)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--fxsr-fill,0%)) 0 0);
}

/* Hover & filled */
.fxsr-stars a.star.hover  .fxsr-star::after,
.fxsr-stars a.star.filled .fxsr-star::after{
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}

/* Legend */
.fx-star-ratings .rating-count{
  margin-left:.25rem;
  font-size:12px;
  color:#363636;
}

/* Screen reader */
.fx-star-ratings .screen-reader-text{
  position:absolute!important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
  word-wrap:normal;
}

/* Tooltip */
.fxsr-tooltip{
  position:absolute;
  left:50%;
  top:-36px;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:6px;
  background:rgba(0,0,0,.85);
  color:#fff;
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  z-index:9999;
  transition:opacity .18s ease, transform .18s ease;
}
.fxsr-tooltip.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}

/* Align wrapper */
.fx-star-ratings.fxsr-align-left{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  width:100%;
}
.fx-star-ratings.fxsr-align-center{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.fx-star-ratings.fxsr-align-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
}