/* ==== Review page ==== */
.orisando-review-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 0 60px;
}

.orisando-review-intro h1,
.orisando-review-submitted h1 {
    margin-bottom: 10px;
}

.orisando-review-submitted {
    text-align: center;
    padding: 40px 20px;
}

.orisando-review-error {
    background: #fdecea;
    border: 1px solid #f3b9b6;
    color: #b71c1c;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.orisando-review-item {
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 18px;
}

.orisando-review-item--invalid {
    border-color: #e02b27;
    box-shadow: 0 0 0 1px #e02b27;
}

.orisando-review-item__error {
    color: #e02b27;
    font-size: 13px;
    margin: 8px 0 0;
}

.orisando-review-item__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.orisando-review-item__media {
    flex: 0 0 80px;
}

.orisando-review-item__media img {
    max-width: 80px;
    height: auto;
    display: block;
}

.orisando-review-item__name {
    font-weight: 700;
    font-size: 16px;
}

.orisando-review-item__comment {
    margin-top: 10px;
}

.orisando-review-item__comment textarea {
    width: 100%;
    box-sizing: border-box;
}

.orisando-review-actions {
    margin-top: 10px;
}

/* ==== Pure-CSS star rating widget ==== */
.orisando-star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.orisando-star-rating input {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.orisando-star-rating label {
    font-size: 32px;
    line-height: 1;
    color: #cccccc;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s ease;
}

.orisando-star-rating label:hover,
.orisando-star-rating label:hover ~ label,
.orisando-star-rating input:checked ~ label {
    color: #f0a020;
}

/* ==== Reviews tab ==== */
/* Width alignment with the grouped-product tab bar lives in the theme LESS
   (Orisando_ProductReview/web/css/source/_module.less) so it can reuse the
   theme's @layout__max-width variable instead of a hardcoded value. */
.orisando-reviews-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.orisando-reviews-list__item {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #e3e3e3;
}

.orisando-reviews-list__media {
    flex: 0 0 70px;
}

.orisando-reviews-list__media img {
    max-width: 70px;
    height: auto;
}

.orisando-reviews-list__body {
    flex: 1 1 auto;
}

.orisando-reviews-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.orisando-reviews-list__product {
    font-weight: 700;
}

.orisando-reviews-list__date {
    color: #888888;
    font-size: 13px;
}

.orisando-reviews-list__comment {
    margin: 4px 0 0;
}

.orisando-stars span.on {
    color: #f0a020;
}

.orisando-stars span.off {
    color: #cccccc;
}

.orisando-reviews-empty {
    padding: 20px 0;
}