/* =============================================
   WooCommerce Reviews
   ============================================= */

/* --- Star rating display (read-only) ---
   WooCommerce renders:
     <div class="star-rating">
       <span style="width:XX%">Rated <strong class="rating">N</strong> out of 5</span>
     </div>
   The grey stars sit on .star-rating::before. The red filled stars sit on span::before (absolutely
   positioned at top:0). padding-top:1.5em on the span pushes the "Rated N out of 5" text below
   the 1.2em visible height, so it's clipped by the parent's overflow:hidden. */
.star-rating {
    display: inline-block;
    font-size: 1rem;
    height: 1.2em;
    line-height: 1.2em;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    width: 6.2em;
}

.star-rating::before {
    color: #d3d3d3;
    content: "★★★★★";
    letter-spacing: 0.24em;
    position: absolute;
    top: 0;
    left: 0;
}

.star-rating > span {
    display: block;
    left: 0;
    overflow: hidden;
    padding-top: 1.5em; /* pushes text content below the 1.2em visible height */
    position: absolute;
    top: 0;
    white-space: nowrap;
    /* width set inline by WooCommerce */
}

.star-rating > span::before {
    color: #cb1a0e;
    content: "★★★★★";
    left: 0;
    letter-spacing: 0.24em;
    position: absolute;
    top: 0;
}

/* --- Product rating summary (above add-to-cart) --- */
.woocommerce-product-rating {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.woocommerce-product-rating .woocommerce-review-link {
    color: #575757;
    font-size: 0.875rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.woocommerce-product-rating .woocommerce-review-link:hover {
    text-decoration-color: currentColor;
}

/* --- Reviews panel --- */
.woocommerce-Tabs-panel--reviews {
    margin: 3rem auto 2rem;
    max-width: 48rem;
    padding: 0 1rem;
}

#reviews {
    margin: 0 auto;
}

.woocommerce-Reviews-title {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: clamp(18px, 5vw, 22px);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

/* --- Review list --- */
.commentlist {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.commentlist .comment_container {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem 0;
}

.commentlist .comment_container img.avatar {
    border-radius: 50%;
    flex-shrink: 0;
    height: 2.75rem;
    width: 2.75rem;
}

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

.commentlist .star-rating {
    margin-bottom: 0.4rem;
}

.commentlist .meta {
    color: #575757;
    font-size: 0.8125rem;
    margin: 0.35rem 0 0.75rem;
}

.commentlist .woocommerce-review__author {
    color: #000;
    font-weight: 600;
}

.commentlist .woocommerce-review__published-date {
    color: #888;
}

.commentlist .description p {
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
}

/* --- "No reviews" message --- */
.woocommerce-noreviews {
    color: #575757;
    font-size: 0.9375rem;
    margin-bottom: 2rem;
}

/* --- Review form --- */
#review_form_wrapper {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 2.5rem;
    padding-top: 2rem;
}

#reply-title,
.comment-reply-title {
    font-size: clamp(16px, 4vw, 20px);
    margin-bottom: 1.5rem;
}

.comment-form .comment-notes {
    color: #575757;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.comment-form p {
    margin-bottom: 1.25rem;
}

.comment-form label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.comment-form .required {
    color: #cb1a0e;
    margin-left: 0.15em;
}

.comment-form .form-submit {
    margin-bottom: 0;
}

#submit {
    background-color: #cb1a0e;
    border: 0;
    border-radius: 1.875rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05rem;
    line-height: 1;
    padding: 0.8125rem 2rem;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.4s ease;
}

#submit:hover {
    background-color: #000;
    color: #fff;
}

/* --- Interactive star picker in review form ---
   WooCommerce renders <p class="stars"><span><a class="star-1" href="#">1</a>…</span></p>
   JS adds .selected to <p> and .active to the chosen <a>.
   We hide the link text and show Unicode stars via ::before. */
.comment-form-rating {
    margin-bottom: 1.25rem;
}

.comment-form-rating label {
    margin-bottom: 0.5rem;
}

.comment-form-rating .stars {
    display: block;
}

.comment-form-rating .stars span {
    display: flex;
    gap: 0.15em;
}

.comment-form-rating .stars a {
    color: transparent;
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1;
    position: relative;
    text-decoration: none;
    user-select: none;
    width: 1.24em;
}

.comment-form-rating .stars a::before {
    color: #d3d3d3;
    content: "★";
    left: 0;
    position: absolute;
    top: 0;
    transition: color 0.15s;
}

/* Hover: fill all stars up to and including hovered */
.comment-form-rating .stars span:hover a::before {
    color: #cb1a0e;
}

.comment-form-rating .stars span:hover a:hover ~ a::before {
    color: #d3d3d3;
}

/* Selected state (after click): WooCommerce adds .selected to <p.stars> and .active to the chosen <a> */
.comment-form-rating .stars.selected span a::before {
    color: #cb1a0e;
}

.comment-form-rating .stars.selected span a.active ~ a::before {
    color: #d3d3d3;
}