/* Wrapper formularza */
.hello-comment-form-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

/* Komunikaty */
.hello-comment-message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
}

.hello-comment-message--error {
    background: #ffe6e6;
    border: 1px solid #ff9b9b;
    color: #b3261e;
}

.hello-comment-message--success {
    background: #e6ffef;
    border: 1px solid #82d49b;
    color: #1b5e20;
}

/* Brak opinii */
.no-comments-message {
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 400;
}

/* Pola formularza */
.comment-form-author,
.comment-form-email,
.comment-form-comment,
.comment-form-rating,
.form-submit {
    margin-bottom: 20px;
}

.comment-form-author label,
.comment-form-email label,
.comment-form-comment label,
.comment-form-rating label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-comment textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #d0d0d0;
    font-size: 14px;
    font-family: inherit;
}

.comment-form-comment textarea {
    resize: vertical;
}

/* Gwiazdki / krople oceny */
.rating-stars {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 6px;
}

.rating-star {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease-out;
}

.rating-star svg {
    display: block;
}

.rating-shape {
    opacity: 0.25;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Zaznaczone / hover */
.rating-star.is-selected .rating-shape,
.rating-star:hover .rating-shape {
    opacity: 1;
    transform: scale(1.05);
}

/* Tekst z oceną */
.rating-display {
    display: inline-block;
    margin-top: 2px;
    font-size: 13px;
}

/* Przycisk */
.form-submit .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 4px;
    border: none;
    background: #2b1e38;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease-out, transform 0.1s ease-out;
}

.form-submit .submit:hover {
    background: #3a284d;
    transform: translateY(-1px);
}

.form-submit .submit:active {
    transform: translateY(0);
}