/* Comments & Ratings */
.comments-section { scroll-margin-top: 100px; }

.star-rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.star-rating-stars {
    display: inline-flex;
    gap: 2px;
    color: #f59e0b;
}

.star-rating--sm .star-rating-stars { font-size: 0.85rem; }
.star-rating--lg .star-rating-stars { font-size: 1.35rem; }

.star-rating-text {
    font-size: 0.9rem;
    color: #64748b;
    margin-left: 0.25rem;
}

.post-card-rating {
    margin-bottom: 0.5rem;
}

.post-card-rating .star-rating-text { font-size: 0.75rem; }

.post-header-rating {
    margin-bottom: 1rem;
}

/* Comment list */
.comment-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s;
}

.comment-item:hover {
    background: rgba(99, 102, 241, 0.03);
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--radius, 12px);
}

.comment-item:last-child { border-bottom: none; }

.comment-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.avatar-c1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.avatar-c2 { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.avatar-c3 { background: linear-gradient(135deg, #14b8a6, #06b6d4); }
.avatar-c4 { background: linear-gradient(135deg, #f59e0b, #eab308); }
.avatar-c5 { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.avatar-c6 { background: linear-gradient(135deg, #64748b, #475569); }

.comment-body { flex: 1; min-width: 0; }

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.35rem;
}

.comment-author { font-size: 1rem; }

.comment-text {
    line-height: 1.65;
    color: #334155;
}

/* Comment form */
.comment-form-card {
    border-radius: var(--radius, 12px) !important;
    background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}

.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
}

.star-input {
    display: flex;
    gap: 0.25rem;
}

.star-input-btn {
    background: none;
    border: none;
    padding: 0.15rem;
    font-size: 1.75rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: transform 0.15s, color 0.15s;
    line-height: 1;
}

.star-input-btn:hover,
.star-input-btn.active {
    color: #f59e0b;
    transform: scale(1.1);
}

.star-input-btn .bi-star-fill { color: #f59e0b; }

#ratingError { display: none; font-size: 0.875rem; color: #dc3545; }

@media (max-width: 576px) {
    .comment-item { gap: 0.75rem; }
    .comment-avatar { width: 40px; height: 40px; font-size: 0.95rem; }
}