.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; } .upr-stars {
font-size: 18px;
display: inline-block;
vertical-align: middle;
line-height: 1;
white-space: nowrap; position: relative;
height: 1em;
overflow: visible;
} .upr-stars-bg {
color: #ddd;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
} .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;
} .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%; }
}