/**
 *  This module was created by Anastasia Bu and is protected by the laws of Copyright.
 *  This source file is subject to a commercial license from Anastasia Bu
 *
 *  Page "All reviews" — responsive, theme-agnostic layout.
 *  Everything is scoped under .wsr-allreviews so it cannot leak into the
 *  active theme or other modules and remains compatible with PrestaShop 8 / 9.
 *  Colors are intentionally NOT changed here.
 */

/* =========================================================================
   1. Page wrapper
   ========================================================================= */
.wsr-allreviews {
    --wsr-gap: clamp(12px, 1.4vw + 4px, 28px);
    --wsr-gap-sm: clamp(8px, 0.8vw + 4px, 16px);
    --wsr-radius: 8px;
    --wsr-border-color: #e3e3e3;
    --wsr-border: 1px solid var(--wsr-border-color);
    --wsr-thumb: 120px;
    --wsr-product-thumb: clamp(72px, 12vw, 120px);

    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(12px, 2vw, 24px);

    font-size: clamp(14px, 0.25vw + 13px, 16px);
    line-height: 1.55;
}

.wsr-allreviews *,
.wsr-allreviews *::before,
.wsr-allreviews *::after {
    box-sizing: border-box;
}

/* =========================================================================
   2. Summary block (average grade + per-rating filter bars)
   ========================================================================= */
.wsr-allreviews .wsr-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wsr-gap);
    align-items: center;
    padding: var(--wsr-gap);
    margin-bottom: var(--wsr-gap);
    border: var(--wsr-border);
    border-radius: var(--wsr-radius);
}

@media (min-width: 720px) {
    .wsr-allreviews .wsr-summary {
        grid-template-columns: minmax(180px, 240px) 1fr;
        align-items: start;
    }
}

/* Override more-specific rules from productcomments.css for this page only.
   Those rules use #module-ws_productreviews-default #score-chart-holder which
   is two IDs, so we match that specificity here. */
.wsr-allreviews #score-chart-holder,
#module-ws_productreviews-default .wsr-allreviews #score-chart-holder {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: var(--wsr-gap);
    text-align: left;
    flex-basis: auto;
    min-width: 0;
}

.wsr-allreviews .wsr-summary__score {
    text-align: center;
    padding: 0;
}

.wsr-allreviews .wsr-summary__score .review-header {
    margin: 0 0 8px;
    padding: 0;
    font-size: clamp(16px, 0.4vw + 14px, 20px);
    line-height: 1.3;
}

.wsr-allreviews .wsr-summary__score .score {
    margin: 0;
    font-size: clamp(36px, 2.2vw + 22px, 56px);
    font-weight: 700;
    line-height: 1;
}

.wsr-allreviews .wsr-summary__score .rating-holder {
    display: inline-flex;
    margin: 8px 0;
    max-height: none;
    min-height: 0;
    overflow: visible;
}

.wsr-allreviews .wsr-summary__score .rating-holder .star_content {
    min-width: 0;
}

.wsr-allreviews .wsr-summary__score .reviews-number {
    margin: 0;
    font-size: 0.95em;
}

/* =========================================================================
   3. Rating bars / filter rows
   ========================================================================= */
.wsr-allreviews .rating-graph-container,
.wsr-allreviews .rating-graph-container_17,
#module-ws_productreviews-default .wsr-allreviews .rating-graph-container,
#module-ws_productreviews-default .wsr-allreviews .rating-graph-container_17 {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.wsr-allreviews .wsr-rating-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.wsr-allreviews .wsr-rating-row {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 2px 8px;
    border-radius: 6px;
}

.wsr-allreviews .wsr-rating-row.review_filter_current {
    outline: 1px dashed currentColor;
    outline-offset: -2px;
}

.wsr-allreviews .review_filtre {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0;
    text-decoration: none;
}

.wsr-allreviews .review_filtre:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

.wsr-allreviews .review_filtre .star_content {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.wsr-allreviews .wsr-rating-row__count {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =========================================================================
   4. Pagination
   ========================================================================= */
.wsr-allreviews .nav-review {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0 0 var(--wsr-gap);
    padding: 0 0 var(--wsr-gap-sm);
    border-bottom: var(--wsr-border);
}

.wsr-allreviews .paging-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wsr-allreviews .nav-review a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: var(--wsr-border);
    border-radius: 6px;
    text-decoration: none;
    line-height: 1;
}

.wsr-allreviews .nav-review a:hover,
.wsr-allreviews .nav-review a:focus-visible {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

.wsr-allreviews .nav-review a.paging-selected {
    background: #e3e3e3;
    font-weight: 600;
}

/* =========================================================================
   5. Reviews list
   ========================================================================= */
.wsr-allreviews .wsr-list {
    display: grid;
    gap: var(--wsr-gap);
}

/* The .comment markup comes from review.tpl (shared with the product page).
   We override its layout only inside this page. */
.wsr-allreviews .comment {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wsr-gap-sm);
    padding: var(--wsr-gap);
    margin: 0;
    border: var(--wsr-border);
    border-radius: var(--wsr-radius);
    background: transparent;
}

@media (min-width: 600px) {
    .wsr-allreviews .comment {
        grid-template-columns: var(--wsr-product-thumb) 1fr;
        align-items: start;
    }
}

/* product thumbnail (was using bootstrap col-sm-2; we ignore that here) */
.wsr-allreviews .comment__product-img {
    width: 100%;
    max-width: var(--wsr-product-thumb);
    padding: 0;
    margin: 0;
    flex: none;
}

.wsr-allreviews .comment__product-img a {
    display: block;
}

.wsr-allreviews .comment__product-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
}

/* author + details */
.wsr-allreviews .comment_wrapp {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wsr-gap-sm);
    min-width: 0;
}

@media (min-width: 900px) {
    .wsr-allreviews .comment_wrapp {
        grid-template-columns: minmax(180px, 220px) 1fr;
    }
}

.wsr-allreviews .comment_author {
    width: auto;
    flex: none;
    min-width: 0;
}

.wsr-allreviews .comment_grade_wrapp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.wsr-allreviews .comment_author_infos {
    margin-top: 6px;
    font-size: 0.95em;
}

.wsr-allreviews .comment_author_infos > * + * {
    margin-top: 4px;
}

.wsr-allreviews .verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    padding-top: 6px;
}

.wsr-allreviews .verified_label {
    line-height: 1.2;
}

.wsr-allreviews .verified_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;
    overflow: hidden;
}

.wsr-allreviews .verified_icon .ws-verified-svg {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.wsr-allreviews .comment_details {
    min-width: 0;
}

.wsr-allreviews .comment_details .title_block {
    margin: 0 0 6px;
    padding: 0;
    font-size: clamp(15px, 0.3vw + 14px, 18px);
    line-height: 1.35;
}

.wsr-allreviews .comment_details_content {
    margin: 0 0 12px;
    padding: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.wsr-allreviews .recommended {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
}

.wsr-allreviews .respond {
    margin: 8px 0 12px;
    padding: 12px 14px;
    border-radius: 6px;
}

/* helpful (yes/no buttons + report abuse) */
.wsr-allreviews .helpful {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.wsr-allreviews .helpful li {
    min-width: 0;
}

/* secondary criteria list inside a review */
.wsr-allreviews .ws_p_criterions {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    width: 100%;
    font-size: 0.9em;
}

.wsr-allreviews .ws_p_criterions li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* =========================================================================
   6. Customer photos in a review
   ========================================================================= */
.wsr-allreviews .ws_customers_imgs {
    width: 100%;
    height: auto;
    margin: 8px 0 0;
    padding: 0;
    grid-column: 1 / -1;
}

.wsr-allreviews .ws_carousel--simple {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--wsr-thumb), 1fr));
    gap: 8px;
    width: 100%;
    height: auto;
}

.wsr-allreviews .ws_carousel__slide_wrapper {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 6px;
    position: static;
}

.wsr-allreviews .ws_carousel__slide {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.25s ease;
}

.wsr-allreviews .ws_carousel__slide:hover,
.wsr-allreviews .ws_carousel__slide:focus-visible {
    transform: scale(1.04);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* =========================================================================
   7. Empty state
   ========================================================================= */
.wsr-allreviews .alert {
    margin: var(--wsr-gap) 0;
    padding: var(--wsr-gap);
    border: var(--wsr-border);
    border-radius: var(--wsr-radius);
}

/* =========================================================================
   8. Lightbox: handled by views/css/wsr-lightbox.css (native <dialog>).
   ========================================================================= */

/* =========================================================================
   9. Utilities
   ========================================================================= */
.wsr-allreviews .hidden {
    display: none !important;
}

.wsr-allreviews .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   10. Large screens (≥ 1600px) — keep things readable, not stretched
   ========================================================================= */
@media (min-width: 1600px) {
    .wsr-allreviews {
        --wsr-thumb: 140px;
    }
}

@media (min-width: 2400px) {
    .wsr-allreviews {
        max-width: 1440px;
    }
}

.wsr-allreviews #score-chart-holder {
    margin-bottom: 15px;
}

#score-chart-holder {
    margin-bottom: 20px;
}

.helpful .usefulness_btn {
    background: none;
    padding: .5rem 0.1rem;
}