/* star_rating.css */

.star-rating-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(0.3rem, 8px, 1.3rem) 0;
}

.star-rating-widget.readonly .star {
    cursor: default;
}

.stars {
    display: flex;
    gap: 2px;
}

.star {
    cursor: pointer;
    font-size: clamp(1rem, 24px, 4rem);
    color: #ddd;
    transition: color 0.2s, transform 0.1s;
}

.star:hover {
    transform: scale(1.2);
}

.star.active {
    color: #ffbe0b; /* Gold */
}

.star.inactive {
    color: #ddd;
}

.rating-info {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(0.6rem, 14.4px, 2.4rem);
    color: #666;
}

.average-rating {
    font-weight: bold;
    font-size: clamp(0.7rem, 17.6px, 2.9rem);
    color: #1a2b4c;
}

.rating-count {
    color: #888;
}

.login-prompt {
    font-size: clamp(0.5rem, 12.8px, 2.1rem);
    color: #666;
}

.login-prompt a {
    color: #3a86ff;
    text-decoration: none;
}

.login-prompt a:hover {
    text-decoration: underline;
}

/* Projects page specific layout (already handled by website.css) */
.projects .post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.4rem, 10px, 1.7rem) 0;
    border-top: 1px solid #eee;
}

.comment-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: clamp(0.6rem, 14.4px, 2.4rem);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: clamp(0.2rem, 5px, 0.8rem) clamp(0.4rem, 10px, 1.7rem);
    border-radius: 20px;
    transition: background-color 0.2s;
}

.comment-btn:hover {
    background-color: #f0f0f0;
}

.comment-btn i {
    font-size: clamp(0.7rem, 17.6px, 2.9rem);
}