/* upr.css - styling for rating widget with server-side stars fallback */
.upr-rating {
  border: 1px solid #ddd;
  padding: 20px;
  max-width: 480px;
  border-radius: 6px;
  background: #fafafa;
  margin: 20px 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
  font-family: inherit;
}

.upr-rating label { font-weight: 600; display: block; margin-bottom: 8px; }

.upr-rating input[type="text"],
.upr-rating select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 15px;
  box-sizing: border-box;
}

.upr-submit {
  background: #0073aa;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
.upr-submit:hover { background: #006799; }

/* STAR BAR (server-side fallback + JS overlay) */
.upr-stars {
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap; /* prevent wrapping */
  position: relative;
  height: 1em;
  overflow: visible;
}

/* background (grey) */
.upr-stars-bg {
  color: #ddd;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* foreground (gold), clipped by width */
.upr-stars-fg {
  color: #f1c40f;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Recent list */
.upr-user-list { margin-top: 12px; padding-top: 10px; border-top: 1px solid #eee; }

.upr-user-list ul { list-style: disc; padding-left: 20px; margin-bottom: 10px; }

.upr-view-all-btn {
  background: #0073aa;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.upr-view-all-btn:hover { background: #006799; }

.upr-star { font-size: 18px; color: #ddd; margin-right: 2px; cursor: default; line-height:1; display:inline-block; vertical-align: middle; }

.upr-star.full { color: #f1c40f; }
.upr-star.half { position: relative; color: #f1c40f; }
.upr-star.half::after { content: '★'; color: #ddd; position: absolute; top:0; left:50%; width:50%; overflow:hidden; }

.upr-user-hidden { transition: all 0.25s ease-in-out; }

@media (max-width: 480px) {
  .upr-rating { padding: 14px; max-width: 100%; }
}