/* Review display styles — aligned with the product-sheet design language:
   white rounded cards on the soft-grey page, centered dark headings, the
   site orange accent (#ff8e4f), pill primary buttons. Tokens mirror the
   site-wide --searchv2-* palette, kept local so this file is self-contained. */

:root {
  --rev-text: #232323;
  --rev-muted: #6b6b6b;
  --rev-border: #e5e5e5;
  --rev-soft: #f6f6f6;
  --rev-accent: #ff8e4f;
  --rev-accent-dark: #ec7330;
  --rev-star: #ff8e4f;
  --rev-star-empty: #c4c4c4;
  --rev-radius: 8px;
  /* Match the product-sheet .product-card exactly (no border, this shadow). */
  --rev-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px 0px;
}

/* Inline summary embedded in the price card (top of product-actions).
   Pattern: ★★★★☆ 3,8 (6 avis vérifiés) → clickable, scrolls to #reviews. */

.review-summary-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6b6b6b;
  text-decoration: none;
  line-height: 1;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.review-summary-inline:hover .review-summary-inline__count-label {
  color: #000;
}

.review-summary-inline__stars {
  font-size: 20px;
  line-height: 1;
}

.review-summary-inline__stars .star {
  color: #c4c4c4;
}

.review-summary-inline__stars .star.on {
  color: #ff8e4f;
}

.review-summary-inline__score {
  font-weight: 700;
  color: #232323;
}

.review-summary-inline__count {
  color: #232323;
  font-weight: 700;
}

/* Only the "X avis" text is underlined — keeping the parentheses out of the
   underline (underlining them looked bad under their curves). */
.review-summary-inline__count-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Bottom review section (below the QA tab) — one white card per the product
   sheet sections (Conseils de l'expert / Mode d'emploi / Questions-Réponses).
   --------------------------------------------------------------------------- */

/* The card chrome (width, bg, radius, shadow, padding, vertical rhythm) is
   provided by the shared .container + .product-card wrappers in the template,
   so the block is exactly the same size as the sibling product-sheet blocks.
   This rule only carries the text color. */
.review-section {
  color: var(--rev-text);
}

.review-section__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--rev-text);
  text-align: center;
  margin: 0 0 24px 0;
}

.review-section__empty {
  background: var(--rev-soft);
  padding: 24px;
  text-align: center;
  color: var(--rev-muted);
  border-radius: var(--rev-radius);
}

/* Detailed aggregate block — soft panel inside the section card. */
.review-section__aggregate {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 28px;
  align-items: center;
  background: var(--rev-soft);
  border-radius: var(--rev-radius);
  padding: 20px 24px;
  margin: 0 0 20px 0;
}

.review-section__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.review-section__score-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.review-section__score-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--rev-text);
  line-height: 1;
}

.review-section__score-sep {
  font-size: 15px;
  color: var(--rev-muted);
}

.review-section__score-stars {
  font-size: 20px;
  letter-spacing: 1px;
}

.review-section__score-total {
  font-size: 13px;
  color: var(--rev-muted);
}

.review-section__score-pending {
  font-size: 12px;
  color: var(--rev-muted);
  font-style: italic;
}

.review-section__distribution {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-section__bar-row {
  display: grid;
  grid-template-columns: 32px 1fr 40px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--rev-muted);
}

.review-section__bar {
  background: #e7e7e7;
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}

.review-section__bar-fill {
  display: block;
  background: var(--rev-accent);
  height: 100%;
  width: var(--w, 0%);
  border-radius: 6px;
}

.review-section__bar-count {
  text-align: right;
  color: var(--rev-muted);
}

@media (max-width: 480px) {
  .review-section__aggregate {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.review-section__filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--rev-soft);
  padding: 14px 18px;
  border-radius: var(--rev-radius);
  margin-bottom: 20px;
  align-items: end;
}

.review-section__filters label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--rev-muted);
  gap: 4px;
}

.review-section__filters select {
  padding: 8px 10px;
  border: 1px solid var(--rev-border);
  border-radius: 8px;
  background: #fff;
  color: var(--rev-text);
  font: inherit;
}

.review-section__checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  margin-top: 18px;
}

.review-section__filter-reset {
  /* The filter row is align-items:end; sit on the same bottom line as the
     selects, with vertical padding matching their height so the text baselines
     line up (instead of the previous margin-top hack that looked detached). */
  align-self: end;
  padding: 9px 0;
  font-size: 13px;
  color: var(--rev-accent-dark);
  text-decoration: underline;
}

.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-card {
  background: #fff;
  border: 1px solid var(--rev-border);
  border-radius: var(--rev-radius);
  padding: 18px 20px;
}

.review-card__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.review-card__stars {
  font-size: 18px;
}

.review-card__verified {
  background: #1f9d57;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.review-card__author {
  font-size: 13px;
  color: var(--rev-muted);
  margin-bottom: 8px;
}

.review-card__author strong {
  color: var(--rev-text);
}

.review-card__date {
  color: var(--rev-muted);
}

.review-card__body {
  margin: 8px 0;
  line-height: 1.6;
  color: var(--rev-text);
  white-space: pre-wrap;
}

.review-card__response {
  background: var(--rev-soft);
  border-left: 3px solid var(--rev-accent);
  padding: 10px 14px;
  font-size: 13px;
  margin: 12px 0 8px;
  border-radius: 0 8px 8px 0;
}

.review-card__response strong {
  color: var(--rev-accent-dark);
  display: block;
  margin-bottom: 4px;
}

.review-card__response p {
  margin: 0;
  white-space: pre-wrap;
}

.review-section__more {
  text-align: center;
  margin-top: 24px;
}

/* Primary pill button — mirrors the product sheet .btn-primary. */
.review-section__more-link {
  display: inline-block;
  background: var(--rev-accent);
  color: #fff;
  padding: 0.55rem 1.5rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.15s ease;
}

.review-section__more-link,
.review-section__more-link:hover,
.review-section__more-link:focus {
  /* Force white text — overrides the site-wide `a:hover { color:#EC7330 }`
     (custom.css) which otherwise turned the label the same colour as the
     button, making it vanish on hover. Same approach as the site .btn-primary. */
  color: #fff !important;
}

.review-section__more-link:hover {
  background: var(--rev-accent-dark);
}

.review-section__no-match {
  text-align: center;
  color: var(--rev-muted);
  padding: 16px;
}

.review-section__no-match a,
.review-card__response a {
  color: var(--rev-accent-dark);
}

/* Dedicated /avis/produit/<id>/ page */
.review-page-header {
  background: #fff;
  border-radius: var(--rev-radius);
  margin: 16px 0;
  padding: 16px;
  box-shadow: var(--rev-shadow);
}

/* Below 768px the breadcrumb above is hidden (core/breadcrumb.html is
   hidden-sm-down → @media max-width:767px), so the first card would sit flush
   against the site header. Use padding on the (grey) content wrapper, NOT a
   margin on the card: a top margin collapses up out of the grey .wrapper and
   the resulting gap renders white (looks like the logo block grew). Padding
   never collapses and stays inside the grey background. */
@media (max-width: 767px) {
  .review-page-wrapper {
    padding-top: 1px;
  }
}

.review-page-header__product {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.review-page-header__thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rev-border);
}

.review-page-header__product-text h1 {
  margin: 0 0 4px 0;
  font-size: 22px;
  color: var(--rev-text);
}

.review-page-header__product-text p {
  margin: 0;
  color: var(--rev-muted);
  font-size: 14px;
}

.review-page-header__product:hover .review-page-header__product-text h1 {
  text-decoration: underline;
}

.review-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  flex-wrap: wrap;
  font-size: 14px;
}

.review-pagination a,
.review-pagination__current {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--rev-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--rev-text);
}

.review-pagination a:hover {
  background: var(--rev-soft);
}

.review-pagination__current {
  background: var(--rev-accent);
  color: #fff;
  border-color: var(--rev-accent);
  font-weight: 700;
}

.review-pagination__nav {
  background: var(--rev-soft);
}