.pur-rating {
    display: inline-block;
    font-family: Arial, sans-serif;
}

/* -----------------------------
   STAR STYLE
----------------------------- */
.pur-stars {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pur-star {
    font-size: 24px;
    cursor: pointer;
    color: #ccc;
    transition: all 0.2s ease;
    user-select: none;
}

/* Hover + active state */
.pur-star:hover,
.pur-star.hover,
.pur-star.active {
    color: #ffb400;
    transform: scale(1.1);
}

/* -----------------------------
   RESULT BOX
----------------------------- */
.pur-result {
    margin-top: 8px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

/* Success / error states (optional extension) */
.pur-result.success {
    color: #1a8f3c;
}

.pur-result.error {
    color: #d63638;
}

/* -----------------------------
   OPTIONAL: READ-ONLY DISPLAY
----------------------------- */
.pur-rating-readonly .pur-star {
    cursor: default;
}

.pur-rating-readonly .pur-star:hover {
    transform: none;
}

/* -----------------------------
   SMALL SCREEN ADJUSTMENT
----------------------------- */
@media (max-width: 480px) {
    .pur-star {
        font-size: 20px;
    }
}