/* =============== Simple Star Ratings Styles =============== */

.ssr {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* --- Static Visual Stars (like ★★★★☆ (226)) --- */
.ssr .ssr-stars {
  display: inline-flex;   /* make the voting stars visible */
  gap: .25rem;
  margin-left: .5rem;     /* space from visual stars */
}

/* If a user already voted, hide the voting row */
.ssr[data-locked="1"] .ssr-stars { display: none; }


.ssr .ssr-visual .star {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  color: #cfcfcf; /* light gray for empty */
}

.ssr .ssr-visual .star::after {
  content: '★';
}

.ssr .ssr-visual .star.full {
  color: #f4b400; /* Google/Amazon-style gold */
}

.ssr .ssr-visual .star.half {
  color: #cfcfcf;
}

.ssr .ssr-visual .star.half::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  color: #f4b400;
}

/* --- Vote Count --- */
.ssr .ssr-meta {
  display: inline-flex;
  gap: .35rem;
  font-size: 14px;
  color: #555;
  vertical-align: middle;
}

/* --- Interactive Stars (hidden by default) --- */
.ssr .ssr-stars {
  display: none; /* shown only if you want hover-to-vote */
  gap: .25rem;
}

.ssr .ssr-star {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
  opacity: .8;
  transition: transform .08s ease, opacity .2s;
}

.ssr .ssr-star:hover {
  transform: scale(1.15);
  opacity: 1;
}

.ssr .ssr-star svg {
  fill: currentColor;
}

.ssr.ssr-locked .ssr-star {
  cursor: not-allowed;
  opacity: .5;
}

.ssr .ssr-star.ssr-rated {
  transform: scale(1.2);
}