.rating-wrapper {
      font-size: 3rem;
      user-select: none;
    }

    #starRating {
      display: flex;
      gap: 0.3rem;
    }

    .star {
      position: relative;
      width: 1em;
      height: 1em;
      cursor: pointer;
    }

    .star-bg,
    .star-inner {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 1em;
      line-height: 1em;
      width: 1em;
      height: 1em;
      text-align: center;
    }

    .star-bg {
      color: black;
      opacity: 0.15;
      z-index: 1;
    }

    body.dark .star-bg {
      color: white;
    }

    .star-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      overflow: hidden;
      z-index: 2;
    }

    .star-inner {
      color: var(--color-primary);
    }


   @media screen and (max-width: 575.98px) {
  .rating-wrapper {
    font-size: 2rem; /* nebo třeba 1.8rem dle potřeby */
  }

  .star {
    width: 0.9em;
    height: 0.9em;
  }

  .star-bg,
  .star-inner {
    font-size: 0.9em;
    width: 0.9em;
    height: 0.9em;
  }
}